Как мы наблюдаем изменения распределения в теневом корне v0?

У меня была потребность в этой точной вещи примерно в то же время, что и у вас. В итоге я создал библиотеку для этого, которую я использую уже неделю или около того при тестировании. Библиотека называется content-change. Это работает хорошо для меня, но я уверен, что есть много возможностей для улучшения.

Это работает так; аналогично событию slotchange элемента slot из 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
});

event, возвращаемый слушателю, содержит несколько разных типов в event.details. event.details.type будет одним из трех:

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

позволяя вам реагировать на различные сценарии. Например, когда узлы, добавленные к основному элементу, удовлетворяют требованиям для распространения на этот элемент содержимого, вы получите следующее:

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