书签：突出显示 Web 组件答案

【问题标题】：Bookmarklet: Highlight web components书签：突出显示 Web 组件
【发布时间】：2020-11-10 05:49:09
【问题描述】：

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

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 组件。

我是代码新手，通常会一起编写代码。任何帮助将不胜感激。

【问题讨论】：

标签： web-component highlight bookmarklet shadow-dom bookmarks

【解决方案1】：

只有使用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, selector, match));
  }

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

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

【讨论】：