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

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

0 голосов
/ 10 февраля 2019

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

Поскольку скрипты могут получить доступ к моей теневой DOM, но стили не могут, я попытался встроить CSS Tippy в теньDOM и связать 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>

1 Ответ

0 голосов
/ 14 февраля 2019

Получите целевой элемент, создайте тег 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)
...