3

在 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>

如何选择我想要的所有元素，无论它们是否嵌套？
对于可选择的元素类型有限制吗？

4

3 回答 3

2

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

正如关于 shadow dom 101 的 HTML5Rocks 文章中所解释的：

注意：select 只能选择作为宿主节点的直接子节点的元素。也就是说，您不能选择后代（例如select="table tr"）。

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

于 2015-10-06T19:57:10.340 回答
0

这可能是 Chrome 的一个错误，您是否也在 Firefox 中尝试过打开 Web 组件标志？

更重要的是，这种选择元素的方法正在消失，取而代之的是“命名槽”方法。我不知道它是否已经击中任何浏览器。解决这个问题可能不值得太多麻烦。

于 2015-08-04T05:28:59.940 回答
0

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

于 2015-08-22T21:35:34.763 回答