youtube-iframe-api在shadow-dom中找不到视频元素(用聚合物创建)

Question

我尝试创建聚合物组件('custom-element')来嵌入youtube视频。我通过传递我的div的id正确地设置了新的YT.Player，比如'player‘。

因为聚合物创建了一个阴影DOM，所以id '#player‘对文档是不可见的

youtube iframe api设置了youtube widget-api来创建iframe，但它在根DOM而不是影子DOM ($(‘自定义元素’).shadow)中查找我的'#player‘。

https://s.ytimg.com/yts/jsbin/www-widgetapi-vflktVMi7/www-widgetapi.js地址为

b=document;if(a=q(a)?b.getElementById(a):a)

有没有办法通过以某种方式将阴影dom的引用传递给youtube iframe-api来解决这个问题呢？

Answer 1

你可以发送DOM元素而不是选择器。因此，如果您使用youtube-api，例如，在元素test-element中，那么您可以简单地将this.$.player作为参数传递。(我假设test-element内部有player id的元素)；

或者，如果你知道它在shadow dom中的某个地方，并且它的路径永远不会改变，那么你可以从root调用它，如下所示：

document.body.querySelector("my-app").$$("another-element").$$("#player")

这只是一个例子，所以你可以理解我的意思