带选择器的聚合物/阴影dom通用选择器

时间:2014-08-04 21:31:47

标签: polymer web-component shadow-dom

我正在尝试理解Polymer和shadow dom的规范,即http://w3c.github.io/webcomponents/spec/shadow/#distribution-algorithms以及带选择器的内容插入点如何与通用选择器一起使用。

规范很难遵循,所以我将解释我想要理解的内容(这是从http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/复制/引用)

我有一份文件:

<div id="nameTag">
   <div class="first">Bob</div>
   <div>B. Love</div>
   <div class="email">bob@</div>
</div>

带选择器的阴影根:

<div style="background: purple; padding: 1em;">
   <div style="color: red;">
      <content select=".first"></content>
   </div>
   <div style="color: yellow;">
      <content select="div"></content>
   </div>
   <div style="color: blue;">
      <content></content>
   </div>
</div>

注意我已经将html5rocks示例更改为末尾的通用选择器,即<content></content>

这里的预期行为是什么?

是否允许带有选择器的内容插入点与通用选择器一起使用?

通用选择器是否会假设任何剩余的主机节点(不确定这是否是正确的描述)。

仅供参考,我可能错误地描述了术语,这是一个难以阅读的规范。

1 个答案:

答案 0 :(得分:4)

是的,您可以将内容块与自定义选择器一起使用。 This is actually quite common。内容块可以访问子in order,因此通用选择器意味着之前未插入的所有节点都将插入其中。在这种情况下,<content select="div">会选择最后两个孩子,因此您的通用<content>将无法获得。