代码之家  ›  专栏  ›  技术社区  ›  lebod

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

  •  2
  • lebod  · 技术社区  · 10 年前

    我正在努力理解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 回复  |  直到 10 年前
        1
  •  4
  •   CletusW    10 年前

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