我正在为我的 Web 组件实现 Orchestrator 模式，如下所示:
<body>
<my-controller>
<div>
<my-list>
<span>
<my-item></my-item>
</span>
</my-list>
</div>
</my-controller>
</body>
我创建的所有自定义元素都使用 Shadow DOM 使用 const root = super.attachShadow({mode: "open"}); root.appendChild(...); .
我想从我的内部 Web 组件访问我的 my-controller connectedCallback() 中的组件:
public connectedCallback(): void
{
if (this.isConnected)
{
for (let node = this.parentElement; node; node = node.parentElement)
if (node instanceof ContainerBase)
{
this._service = (<ContainerBase>node).GetService(this);
break;
}
if (this._service) this.Reset();
else throw new ReferenceError(`${this.nodeName.toLowerCase()}: Couldn't find host element while connecting to document.`);
}
}
奇怪的是:我只能到达直接的父级网页控件。
所以，如果 connectedCallback()被称为 <my-list>我可以联系到 <my-controller> , 但如果 connectedCallback()被称为 <my-item>我只到达<span> .我什至无法联系到 <my-list>当我开始使用 <my-item> 进行搜索时.
即使我在 connectedCallback() 之后遍历 DOM 树被称为，我无法超越<span>当我从 <my-item> 开始时.
这是故意的吗？
为什么我可以从第一个嵌套组件到达外部 Web 组件，而我不能从第二个嵌套组件到达第一个嵌套 Web 组件？
我怎样才能从任何嵌套级别完全向上移动 DOM 树？
最佳答案
当您使用 Shadow DOM 定义自定义元素内容时，您会创建一个独特的 DOM 树。 Shadow DOM 是一个没有根元素的 DocumentFragment。
因此，您不能简单地通过将 DOM 向上移动 parentElement 来到达它的(直观的)祖先。属性(property)。
要访问 Shadow DOM 的宿主元素，而不是 use getRootNode() 结合 host .
来自 <my-item>的 connectedCallback()方法:
connectedCallback() {
var parent = this.getRootNode().host
console.log( parent.localNode ) // my-list
}
如果你想得到一个祖先，你可以试试这个recursive function .
关于javascript - 如何访问嵌套 Web 组件的祖先？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55226473/