我有一个像这样创建的影子 dom 元素......
this.wrapper = document.createElement("div");
this.shadow = this.wrapper.attachShadow({mode: 'open'});
this.$el.appendChild(this.wrapper);
现在我正在考虑在类似于窗口上的影子 dom 中分配一个 JS 变量。如果我使用窗口,我会做类似的事情。
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 )
暗影多姆
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");
}
若要从 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")
}
虽然这不是当前(好的?(做法,但您可以将属性分配给影子根:
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 )