css - 如何在具有作用域 CSS 的影子 DOM 中使用 Tippy？

Question

我想在我的影子 DOM中使用Tippy.js 。

由于脚本可以访问我的影子 DOM 但样式不能，因此我尝试将 Tippy CSS 内联到影子 DOM 中，并将 Popper 和 Tippy 的 JS 链接到外部。这是它不起作用的演示。

我需要确定 CSS 的范围，所以我有以下约束：

<style>
    :host {
      all: initial; /* 1st rule so subsequent properties are reset. */
      display: block;
      contain: content; /* Boom. CSS containment FTW. */
      /* any other CSS, so this is where I inlined the Tippy's */
    }
</style>

Answer 1

获取目标元素，创建一个style标签来保存内联 CSS 并将样式标签附加为子元素。

const anchor = document.querySelector('#blog-header')
const style = document.createElement('style')
style.type = 'text/css'
const stylesheet = // inline Tippy.js CSS here or fetch it from somewhere else
style.appendChild(document.createTextNode(stylesheet))

anchor.content.prepend(style)