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

Question

In v1 shadow roots, we can listen to slotchange on <slot> elements then use slot.assignedNodes() to detect changes. I am looking for a way to do it with v0 shadow roots.

With ShadowDOM v0, is there a way to observe changes in distributed nodes of a <content> element in a shadow root?

The easiest way to implement this would be by using requestAnimationFrame to create a poll loop that calls content.getDistributedNodes() to compare new results with old results, but obviously polling is not ideal and is expensive.

How can it be done?

Answer 1

I had a need for this exact thing about the same time you did. I ended up creating a library for this which I have been using for a week or so now in testing. The library is called content-change . It's working well for me, but I'm sure there are plenty of opportunities for improvement.

It works like this; similarly to the slot element's slotchange event from Shadow DOM v1:

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

The event returned to the listener contains a few different types in the event.details . The event.details.type will be one of the three:

• "nodesAdded"
• "nodesRemoved"
• "mutation"

allowing you to react to different scenarios. For example, when nodes added to the host element fulfill the requirement to be distributed to that content element, you will receive the following:

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