如何解决书签:突出显示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中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。