javascript - 用于监视主机更改的影子 dom 脚本

Question

我正在创建一个应用程序，我需要在其中管理利用影子 dom 的元素集合。由于模板标签封装了内容，我可以将样式和脚本与元素保持在一起，以便它们对事件起作用。我想知道的是，shadowRoot 中的脚本是否可以观察主机属性的变化。

我建议的路径是将数据属性附加到主机，让影子脚本监听对其的更改，然后更新 shadowRoot 内的元素。我知道可以使用 javascript 访问 shadowRoot 中的元素并更改它们，但我的愿望是尝试模块化和可重用性。我最终希望这个组件可以重用并对主机属性的变化使用react。

Answer 1

我找到了一个解决方案并认为我会分享。它可能还不兼容所有浏览器，但这就是生活。

在我的脚本中，我有一个 iffe/monad 来处理我的自定义 html 标签，创建影子根和模板的克隆作为内容。 monad 的参数之一是与我的自定义标记匹配的节点数组。在遍历它们时，我创建了一个 MutationObserver 来监视特定属性的变化，以便在闭包中使用创建的影子根。

            (function (tags, template) {
            Array.prototype.forEach.call(hexagons, function (v, k) {
                    var shadow = v.createShadowRoot();
                    shadow.appendChild(template.content.cloneNode(true));

                    /* mutation observer */
                    var observer = new MutationObserver(function (mutations) {
                            mutations.forEach(function (mutation) {
                                shadow.querySelector('.seconds')
                                   .innerText(
                                      mutation.target.getAttribute(mutation.attributeName)
                                   )
                            });
                        });
                    observer.observe(v, { attributes: true, attributeFilter: ['bgcolor'] });
                }
            );
        }(document.querySelectorAll('time'), document.querySelector('template#time')));

以上内容适用于最新的 Chrome 和 Firefox。我会继续寻找对浏览器更友好的解决方案。