用于监视主机更改的shadow dom脚本-Java 学习之路

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

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

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浏览器友好的解决方案 .

回复于 2024-04-27T05:24:00+08:00

用于监视主机更改的shadow dom脚本

1 回答

相关问题