Javascript 我可以访问自定义html标记吗<；组件>；或<；插槽>；目录

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

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

因此，我创建了如下模板：

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

等

然后我通过HTML元素原型

createdCallback

将其附加到页面

在回调函数中，我希望能够将侦听器连接到

视频

元素，以便我可以在

播放

、

暂停

等方面执行操作。。我不清楚是否有任何方法可以访问传入的视频标签。我可以访问

内容

标记，但它不显示任何子节点。这可能吗

---

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

直接方式

您应该通过在自定义元素本身上使用

querySelector

来访问它：

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

你不需要经过阴影区

---

阴影路

但是，如果要从影子根目录获取它，可以在

元素上使用该方法（以前是

上的

getDistributedNodes（）

）：

它返回插入的节点数组。因为在您的示例中，索引

[0]

处有一个文本节点，您必须在

[1]

处获取该节点

注意：如果要在索引[0]处获取

元素，也可以使用命名插槽

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