Как использовать Tippy в теневом DOM с CSS-областью?

Question

Я хочу использовать Tippy.js в моем теневом DOM.

Так как сценарии могут получить доступ к моей теневой DOM, а стили - нет, я попытался вставить CSS Tippy в теневой DOM и связать JS Popper и Tippy снаружи. Вот демонстрация того, что это не работает.

Мне нужно, чтобы 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 и блуждающих, каков текущий процесс помещения Типпи в теневой дом (например, для использования с расширением браузера). Для меня работает следующее:

      
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,
    //...
})

Answer 2

Получить целевой элемент, создать style тег для хранения встроенного CSS и добавления тега style как дочернего элемента.

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)