如何在带有作用域CSS的shadow DOM中使用Tippy？

Question

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

由于脚本可以访问我的影子DOM但样式不能，我试图在影子DOM中内联Tippy CSS并将Popper和Tippy的JS链接到外面。 Here是一个不起作用的演示。

我需要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)