突出显示影子 DOM 中的元素 - 如何在没有事件侦听器的情况下实现这一点?

Highlighting Elements Within Shadow DOMs - How to Achieve This Without Event Listeners?

提问人:Demodev 提问时间:11/1/2023 最后编辑:Demodev 更新时间:11/1/2023 访问量:29

问:

我正在做一个项目,我需要突出显示常规 DOM 和影子 DOM 中的元素。 目前,我有一个将事件侦听器绑定到影子 DOM 中的元素的函数,但我想修改它以添加一个突出显示元素的类,而不是附加事件侦听器。

这是我用于将事件侦听器附加到影子 DOM 的函数:

function injectToShadowDoms(doc, eventName, listener, capture) {
  var allElements = doc.all;
  for (var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    if (element.shadowRoot) {
      element.shadowRoot.addEventListener(eventName, listener, capture);
    }
  }
}

现在,我想增强这个函数,以添加一个类来突出显示影子 DOM 中的元素。此外,我还有一个单独的函数 (highlightElementsInShadow),用于使用类突出显示阴影 DOM 中的元素。

下面是用于添加类而不是附加事件侦听器的修改代码:

function injectToShadowDoms(doc, highlightClass) {
  var allElements = doc.all;
  for (var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    if (element.shadowRoot) {
      highlightElementsInShadow(element.shadowRoot, highlightClass);
    }
  }
}

function highlightElementsInShadow(shadowRoot, highlightClass) {
  var allShadowElements = shadowRoot.querySelectorAll('*');
  allShadowElements.forEach(function (shadowElement) {
    shadowElement.classList.add(highlightClass);
  });
}

我将不胜感激有关如何正确修改 injectToShadowDoms 函数以在不使用事件侦听器的情况下实现所需的突出显示效果的任何指导。

javascript css-selectors shadow-dom

评论

0赞 Danny '365CSI' Engelman 11/1/2023
让组件控制自己的行为。换句话说,该组件添加一个侦听器并设置一个类。向我们展示您的组件。

答: 暂无答案