javascript - 我们如何观察v0影子根上的分布变化？

在v1阴影根目录中，我们可以听slotchange元素上的<slot>，然后使用slot.assignedNodes()来检测更改。我正在寻找一种使用v0阴影根进行处理的方法。

使用ShadowDOM v0，是否可以观察影子根中<content>元素的分布式节点中的更改？

实现此目的最简单的方法是使用requestAnimationFrame创建一个轮询循环，该循环调用content.getDistributedNodes()将新结果与旧结果进行比较，但显然轮询并不理想且昂贵。

怎么做到呢？

最佳答案

在您执行操作的同一时间，我确实需要此功能。我最终为此创建了一个库，在测试中已经使用了一周左右。该库称为content-change。这对我来说效果很好，但是我敢肯定有很多改进的机会。

它是这样工作的；与Shadow DOM v1中slot元素的slotchange事件类似：

// Because this is non-spec, specify internally which components get to be watched
// "this" is the host element
ContentChange.watch(this);

const contentElement = shadow.querySelector('someContentSelector');
contentElement.addEventListener('contentchange', e => {
    // React to distributed node changes for this content element
});

返回到侦听器的event在event.details中包含几种不同的类型。 event.details.type将是以下三个之一：


"nodesAdded"
"nodesRemoved"
"mutation"


让您对不同的情况做出反应。例如，当添加到主机元素的节点满足分发到该内容元素的要求时，您将收到以下信息：

{
    "type": "nodesAdded",
    "nodesAdded": [Nodes] // An array of newly distributed nodes
}

关于javascript - 我们如何观察v0影子根上的分布变化？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40880512/