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

【问题标题】：How do I add a javascript variable to shadow DOM?如何将 javascript 变量添加到影子 DOM？
【发布时间】：2020-03-24 08:19:03
【问题描述】：

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

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

现在我正在研究在影子 dom 中分配一个 JS 变量，类似于在窗口上。如果我使用的是 window 我会做类似的事情。

window.foo = "bar";

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

例子：

旧方式：

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

暗影支配

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");
}

【问题讨论】：

标签： jquery shadow-dom

【解决方案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 )

【讨论】：

是否可以像全局变量一样从 dom 访问？例如，我可以向 Shadow 添加一个函数并将其用于 onclick 等吗？
打开模式下是，关闭模式下不是
该死对我不起作用 this.shadow.event = function(){} 和
"doSomething 未定义"
更新了 sn-p 以尝试让您更好地了解我在寻找什么。我想如果在设置 HTML 之后我对元素进行 dom 搜索并手动附加它但我还没有到达那里，我可能会这样做

【解决方案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")
}

【讨论】：