时间戳

首页 > 解决方案 > 书签：突出显示 Web 组件

web-component - 书签：突出显示 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-componenthighlightbookmarkletshadow-dombookmarks

解决方案

只有使用该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 中。

推荐阅读