我可以访问自定义 html 标签 <component> 或 <slot> 内容吗

Question

假设我想创建一个自定义 html 元素，例如：

<video-container>
  <video></video>
</video-container>

所以我创建了一个这样的模板：

<div class="wrapper">
   etc..
   <content></content>
</div>

然后我通过 HTML 元素原型 createdCallback.

将其附加到页面

在那个回调中，我希望能够将侦听器附加到 video 元素，这样我就可以在 play、pause 等上做一些事情。我不清楚是否无论如何都可以访问传入的视频标签。我可以访问 content 标签，但它不显示任何子节点。这可能吗？

如果我只抓取整个文档并获取视频元素，我就可以访问视频元素，但这很难看，因为我只想获取当前自定义元素范围内的视频标签。

Answer 1

直接方式

您应该通过在自定义元素本身上使用 querySelector 来访问它：

VideoContainerPrototype.createdCallback = function ()
{
    var video1 = this.querySelector( 'video' ) 
}

你不需要经过影子DOM。

影道

但是如果你想从影子根获取它，你可以在你的 <slot> 元素上使用 assignedNodes() 方法（以前是 <content> 上的 getDistributedNodes()）：

var video2 = this.shadowRoot.querySelector( 'slot' ).assignedNodes()[1]

它 returns 插入了节点的数组。因为在您的示例中，索引 [0] 处有一个文本节点，您必须在 [1].

处获取该节点

注意： 如果您想在索引 [0] 处获取 <video> 元素，您也可以使用命名槽。

Can I access custom html tag <component> or <slot> contents