我可以访问自定义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 root获得它,你可以assignedNodes()在<slot>元素上使用该方法(以前getDistributedNodes()开启<content>):

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

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

注意:如果要<video>在index [0]处获取元素,也可以使用命名槽.