Question

在Chrome 44中，我正在尝试创建一个影子DOM，用于呈现影子主机的一组特定子项在以下代码中，<content select="a">部分仅选择三个<a>元素中的两个。

<div id=a>
    <a>1</a>
    <span><a>2</a></span>
    <a>3</a>
</div>

<template id=b>
    <content select="a"></content>
</template>

<script>
shRoot = document.getElementById('a').createShadowRoot() ;
shRoot.appendChild( document.importNode(document.getElementById('b').content, true) ) ;
</script>

我怎样才能选择我想要的所有元素，无论它们是否嵌套？是否有可选择哪种元素的限制？

Answer 1

这不是内容标记实现中的错误，这确实是它的工作原理。

正如HTML5Rocks关于影子大战101的文章中所解释here：

注意：select只能选择直系子元素主机节点。也就是说，您无法选择后代（egselect =“table tr”）。

因此，实现的内容选择器仅针对直接子节点，而不是嵌套元素。

Answer 2

这可能是Chrome的一个错误，您是否也在Firefox中尝试了网页组件标记？

更重要的是，这种选择元素的方法有利于“命名槽”方法。我不知道它是否已经打过任何浏览器了。解决这个问题可能不值得多麻烦。

Answer 3

我认为这是因为其中一个锚标签不是你所拥有的div元素的直接子元素。

如何使用<content select =“”>选择嵌套元素

3 个答案: