书签：突出显示Web组件

问题描述

我有此小书签代码，它可以在锚标记周围添加边框：

javascript: (function () {
    var a = document.createElement('style'),b;
    document.head.appendChild(a);
    b = a.sheet;
    b.insertRule("a{box-shadow:2px 2px 0 0 #f00 !important;",0);
})()

但是，我试图突出显示网页上的Web组件周围的边框。这些Web组件使用影子DOM。

我正在尝试定位具有特定HTML标记的标记，例如<orbi-button>，<orbi-modal>，<orbi-modal>等。目标是在整个渲染的图像周围显示边框组件。

以下是呈现的组件的HTML外观的示例代码：

<orbi-button appearance="solid" color="blue" scale="m" href="" dir="ltr" hastext="" width="auto" orbi-hydrated="">
   button text here
    </orbi-button>

所以我假设像<orbi-*>这样的东西将以所有Web组件为目标。

我是代码的新手，通常会一起破解东西。任何帮助将不胜感激。

解决方法

只有使用mode:"open"设置创建了shadowRoots，您才能从外部访问shadowRoots。

然后您可以使用以下方法潜入到元素和shadowRoots：

 const shadowDive = (
          el,selector,match = (m,r) => console.warn('match',m,r)
  ) => {
    let root = el.shadowRoot || el;
    root.querySelector(selector) && match(root.querySelector(selector),root);
    [...root.children].map(el => shadowDive(el,match));
  }

请注意，您插入的全局CSS不会触及shadowRoots内部的任何内容。

因此，您必须将<style>注入到找到的每个 shadowRoot中。