【问题标题】:Polymer/shadow dom universal selector with selectors带选择器的 Polymer/shadow dom 通用选择器
【发布时间】:2014-09-27 11:17:47
【问题描述】:

我正在尝试了解 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 示例更改为末尾的通用选择器,即&lt;content&gt;&lt;/content&gt;

这里的预期行为是什么?

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

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

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

【问题讨论】:

    标签: polymer web-component shadow-dom


    【解决方案1】:

    是的,您可以使用带有通用选择器和自定义选择器的内容块。 Thisisactuallyquitecommon。内容块可以访问孩子in order,因此通用选择器意味着之前未插入的所有节点都将插入那里。在这种情况下,&lt;content select="div"&gt; 将选择最后两个孩子,因此您的通用 &lt;content&gt; 将没有。

    【讨论】:

    • 感谢您的确认。我现在意识到我编辑的示例没有意义,真的最后一个div 应该是span(或其他东西)。在这种情况下,通用选择器将假定 span
    • 实际上,我刚刚意识到这与 html5rocks 页面所描述的内容背道而驰,例如The answer is that Bob’s email address appears once, and it is yellow. 这似乎表明第一个select="div" 仅匹配第一个子元素,而不匹配也匹配的后续主机节点?
    • 不,这表示第三个子元素(电子邮件 div)只匹配 第二个 &lt;content&gt; 一次。确实如此。给定的子节点只会出现在单个&lt;content&gt; 中。相反,单个&lt;content&gt; 节点可以选择多个子节点。这有意义吗?
    • 对不起,我看错了,是的,这是有道理的,感谢您的回复。我已标记为已回答
    猜你喜欢
    • 1970-01-01
    • 2015-03-03
    • 1970-01-01
    • 2018-08-14
    • 2017-12-10
    • 2015-07-10
    • 1970-01-01
    • 2017-07-17
    • 1970-01-01
    相关资源
    最近更新 更多