javascript - Polymer 1.0 和外部 DOM 操作库

Question

我想知道如何在创建后通过 jQuery 或虚拟 DOM 修改 Polymer 1.0 标签。

我正在尝试将 Polymer 1.0 与 Mithril.js 结合使用。 Polymer 0.5.5 有 Shadow DOM，它的标签文字和内部结构(在 Chrome 的检查器上)几乎相同。但是 1.0 使用 shady DOM，它作为 HTML 模板工作。

来源:

<paper-element>hello world</paper-element>

检查员的 Polymer 0.5.5 结果:

<paper-button role="button" tabindex="0">hello world</paper-button>

检查员的 Polymer 1.0 结果:

<paper-button role="button" tabindex="0" aria-disabled="false" class="x-scope paper-button-0">
  <paper-ripple class="style-scope paper-button">
     <div id="background" class="style-scope paper-ripple"></div>
     <div id="waves" class="style-scope paper-ripple"></div>
  </paper-ripple>
  <paper-material animated="" class="content  style-scope paper-button x-scope paper-material-0" elevation="0">
    hello world
  </paper-material>
</paper-button>

例如，像这样执行 jQuery 命令:

$("paper-element").text("new label");

它适用于 0.5.5(它显示正确的标签)，但打破了 1.0(内部标签已经消失， Ant 变成了标签)。这种新行为不利于通过其他 DOM 操作库来操作 Polymer 的自定义标签(起初，我在玩 Mithril.js 时遇到了这个问题)。而且我找不到任何 API 来重新初始化内部标签。

Polymer 1.0标签创建后修改支持虚拟DOM或jQuery有什么好的方案吗？

更新(2015 年 6 月 3 日)

我从 Polymer document 找到了解决方案.添加以下代码片段后，Polymer 1.0 可以在 Mithril 虚拟 DOM 上运行:

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

Polymer 通过此设置开始使用 Shadow DOM 而不是默认的 Shady DOM。它与 Polymer 0.5.5 和 JavaScript DOM API 一样友好。谢谢大家!

Answer 1

理想情况下，paper-button 会公开一个用于修改内容的属性或方法，但是 documentation没有列出这样的东西。

幸运的是它仍然是 HTML，并且可以使用。关于demo page我在 Chrome Inspector 中选择了其中一个按钮并运行以下代码来更新按钮的内容:

$0.querySelector('paper-material').innerHTML = 'testing';

在 Chrome 控制台中，$0 指的是当前在 Chrome 元素检查器中选择的元素，在本例中是 paper-button 元素之一。