我正在尝试了解 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>
这里的预期行为是什么?
带有选择器的内容插入点是否允许与通用选择器一起使用?
通用选择器是否会采用任何剩余的主机节点(不确定这是否是正确的描述)。
仅供引用,我可能错误地描述了术语,这是一个很难阅读的规范。
最佳答案
是的,您可以将内容 block 与通用选择器和自定义选择器一起使用。 This is actually quite common 。内容 block 可以访问 children in order ,所以通用选择器意味着之前未插入的所有节点都将被插入那里。在这种情况下,<content select="div">
将选择最后两个 child ,所以你的通用<content>
将一无所获。
关于带选择器的 Polymer/shadow dom 通用选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25127894/