聚合物1.0和外部DOM操作库

Question

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

我正在尝试聚合物1.0与Mithril.js。聚合物0.5.5有阴影DOM和它的标签文字和内部结构(在Chrome的检查器)几乎是相同的。但是1.0使用了shady DOM，它就像HTML模板一样工作。

源:

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

聚合物0.5.5检验结果:

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

聚合物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(内部标签已经变成了标签)。这种新行为不利于通过其他DOM操作库操纵聚合物的自定义标签(起初，我在玩Mithril.js时遇到了这个问题)。我找不到任何API来重新初始化内部标签。

有什么好的解决方案来修改聚合物1.0标签创建后，以支持虚拟DOM或jQuery?

更新(6/3/2015)

我从聚合物文档中找到了解决方案。添加以下代码片段后，Polymer 1.0可以在Mithril虚拟DOM上工作:

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

聚合物开始使用阴影DOM而不是默认的阴影DOM通过这个设置。它是相同的聚合物0.5.5和JavaScript DOM API友好。谢谢大家!

Answer 1

理想情况下，paper-button将公开修改内容的属性或方法，但是文档并没有列出这样的内容。

幸运的是，它仍然是HTML，可以使用。在演示页面上，我选择了Chrome检查器中的一个按钮，并运行以下代码来更新按钮的内容:

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

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

Answer 2

像Polymer集合中的那些Web组件是很难动态定制和填充的。影子DOM的本质使它不受外部影响，这在我看来是web组件的一个关键限制。

但是，可以将这些元素重构为Mithril组件以允许自定义控制。在NPM和Github上有一个用Mithril制作的材料设计元素的优秀集合，名称为聚乙烯。