如何将 javascript 变量添加到影子 DOM？

Question

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

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

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

window.foo = "bar";

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

示例：

旧方法：

var wrapper = document.createElement( 'div' )
window.foo = function(){
  console.log("Do Something");
}
wrapper.innerHTML = '<div onclick="foo()"></div>'
document.body.appendChild( this.wrapper )

阴影Dom

var wrapper = document.createElement( 'div' )
var shadow = this.wrapper.attachShadow( {mode: 'open'} )
shadow.innerHTML = '<div onclick="this.shadow.foo()"></div>'
document.body.appendChild( this.wrapper )
shadow.foo = function(){
  console.log("Do Something");
}

Answer 1

虽然这不是当前的（好的？）做法，但您可以将属性分配给影子根：

this.shadow.foo = "bar"

示例：

var wrapper = document.createElement( 'div' )
var shadow = this.wrapper.attachShadow( {mode: 'open'} )
shadow.innerHTML = 'hello world'
document.body.appendChild( this.wrapper )
shadow.foo = 'bar'
console.log( wrapper.shadowRoot.foo )

Answer 2

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

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

然后你可以调用附加的函数 shadowroot 属性.

查看完整示例：

var wrapper = document.createElement( 'div' )
var shadow = wrapper.attachShadow( {mode: 'open'} )
shadow.innerHTML = '<div onclick="this.getRootNode().foo()">Click</div>'
document.body.appendChild( wrapper )
shadow.foo = function() {
  console.log("Do Something")
}

如何将 javascript 变量添加到影子 DOM？

How do I add a javascript variable to shadow DOM?

jquery

shadow-dom