我可以访问自定义 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' ) 
}

你不需要经过 Shadow DOM。

---

影子方式

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

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

它返回一个插入的节点数组。因为在您的示例中，索引[0] 处有一个文本节点，您必须在[1] 处获取该节点。

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