如何将 JavaScript 变量添加到 Shadow DOM？

Question

我有一个像这样创建的 Shadow dom 元素......

this.wrapper = document.createElement("div");
this.shadow = this.wrapper.attachShadow({mode: 'open'});
this.$el.appendChild(this.wrapper);

现在我正在考虑在 Shadow dom 中分配一个 JS 变量，类似于在窗口上。如果我使用窗口我会做类似的事情。

window.foo = "bar";

我怎样才能做同样的事情只将范围封装到shadow dom？

例子：

老方法：

this.wrapper = document.createElement("div");
this.shadow = this.wrapper.attachShadow({mode: 'open'});
this.$el.appendChild(this.wrapper);

暗影帝国

window.foo = "bar";

Answer 1

shadowRoot要从Shadow DOM 内部访问实体，您应该调用该getRootNode()方法。

<div onclick="this.getRootNode().foo()">Click</div>

然后您可以调用作为属性附加的函数shadowroot。

请参阅完整示例：

<div onclick="this.getRootNode().foo()">Click</div>