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

Question

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

由于脚本可以访问我的影子 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

对于从 google 来到这里并徘徊将 tippy 放入 shadow dom 的当前过程的人们(例如与浏览器扩展一起使用)。以下对我有用:

const shadowRoot = initShadowRoot()

function initShadowRoot() {
    const shadowContainer = document.createElement("div")

    const shadowRoot = shadowContainer.attachShadow({mode: "open"})
    let style = document.createElement('style')
    style.innerText = shadowCss // inline or use a bundler to give you a string representation 

    shadowRoot.appendChild(style)
    document.body.appendChild(shadowContainer)

    return shadowRoot
}

//---
//elsewhere when initializing tippy:

tippy(elment, {
    // ...
    // in shadow dom to avoid affecting the page styles
    appendTo: () => shadowRoot,
    //...
})