如何 select 嵌套元素 <content select="">

Question

在 Chrome 44 中，我正在尝试创建一个影子 DOM 来呈现影子宿主的特定子集。
在下面的代码中，<content select="a"> 部分只是 select 三个 <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>

我怎样才能 select 我想要的所有元素，无论它们是否嵌套？
select可用的元素类型有限制吗？

Answer 1

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

更重要的是，这种选择元素的方法正在消失，取而代之的是 "named slots" 方法。我不知道它是否已经击中了任何浏览器。解决这个问题可能不值得。

Answer 2

我认为这是因为锚标记之一不是您拥有它的 div 元素的直接子元素。

Answer 3

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

如 HTML5Rocks 关于影子的文章 here 中所述 dom 101:

Note: select can only select elements which are immediate children of the host node. That is, you cannot select descendants (e.g.select="table tr").

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

如何 select 嵌套元素 <content select="">

How to select nested elements with <content select="">

html

google-chrome

web-component

shadow-dom

content-tag