用于监视主机更改的影子 dom 脚本答案

【问题标题】：shadow dom script to watch for changes in host用于监视主机更改的影子 dom 脚本
【发布时间】：2014-07-20 23:54:00
【问题描述】：

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

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

【问题讨论】：

我对 Web 组件还很陌生。我们是否需要在标记中包含完整的代码，或者可以在页面加载时延迟加载，比如 iframe？如果代码在标记中本地可用，则应允许。但是，如果它的共享实用程序从不同的域通过网络延迟加载，则可能不允许。来个小提琴 (jsfiddle.net) 玩一下怎么样？
我在this fiddle有基本的想法。我想向模板添加一个脚本，该脚本将监视主机的填充属性的更改，然后在此示例中更改 shadowRoot 内的字体颜色。

标签： javascript css html web-component shadow-dom

【解决方案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。我会继续寻找对 mroe 浏览器友好的解决方案。

【讨论】：