Совместимость shadowdomv1 на firefox

1

Я пытаюсь использовать ShadowDomv1 (с https://github.com/webcomponents/webcomponentsjs и https://github.com/webcomponents/shadycss), но он не работает.

Сам ShadowDom работает, но css не инкапсулирован (как мы можем видеть с помощью правила h2 css).

Он работает по назначению в Chrome и Safari (но оба они поддерживают ShadowDomv1 изначально).

Я что-то упускаю или это невозможно?

Здесь jsbin: http://jsbin.com/maqohoxowu/edit?html,output

И код:

<script type="text/javascript" src="https://rawgithub.com/webcomponents/webcomponentsjs/master/webcomponents-hi-sd-ce.js"></script>
<style type="text/css">
    h2 {
        color: red;
        border-bottom: 1px black dotted;
    }
</style>
<h2>h2 red and dotted</h2>

<my-element>
</my-element>

<template id="myElementTemplate">
    <style scope="my-element">
        h2 {color: blue}
    </style>
    <div>
        <h2>h2 blue and not dotted !</h2> <!-- Should not be dotted because of the encapsulation -->
    </div>
</template>

<script type="text/javascript">
    ShadyCSS.prepareTemplate(myElementTemplate, 'my-element');

    class MyElement extends HTMLElement {
        connectedCallback() {
            ShadyCSS.styleElement(this);

            if (!this.shadowRoot) {
                this.attachShadow({mode: 'open'});
                this.shadowRoot.appendChild(document.importNode(myElementTemplate.content, true));
            }
            ShadyCSS.styleElement(this);
        }
    }

    customElements.define("my-element", MyElement);
</script>
  • 0
    Пожалуйста, предоставьте минимальный воспроизводимый пример в своем посте.
  • 0
    JSBIN не достаточно? Я поставлю это в ответ!
Показать ещё 1 комментарий
Теги:
web-component
firefox
shadow-dom
html5-template

3 ответа

1

Вы можете использовать CustomStyleInterface для применения стилей уровня документа только к объекту без тени:

const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
CustomStyleInterface.addCustomStyle(document.querySelector('style.doc-level'));

class MyElement extends HTMLElement {
  connectedCallback() {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(document.importNode(myElementTemplate.content, true));
  }
}

customElements.define("my-element", MyElement);
<script src="https://rawgithub.com/webcomponents/webcomponentsjs/master/webcomponents-hi-sd-ce.js"></script>
<script src="https://rawgit.com/webcomponents/shadycss/master/custom-style-interface.min.js"></script>

<style class="doc-level">
  h2 {
    color: red;
    border-bottom: 1px black dotted;
  }
</style>

<h2>h2 red and dotted</h2>

<my-element></my-element>

<template id="myElementTemplate">
    <style>
        h2 {color: blue}
    </style>
    <div>
        <h2>h2 blue and not dotted !</h2> 
    </div>
</template>
0

Полипол не может эмулировать инкапсуляцию CSS, которая обрабатывается изначально с помощью истинного ShadowDOM.

Вместо этого, если вы планируете использовать оба варианта, избегайте использования простых селекторов CSS. Вместо этого попробуйте использовать шаблон именования CSS, например BEM: http://getbem.com/introduction/

Это позволит вашему CSS работать в большинстве случаев как в истинном ShadowDOM, так и в ShadyDOM.

0

Согласно странице состояния платформы Mozillas, Shadow DOM все еще находится в разработке. https://platform-status.mozilla.org/#shadow-dom

  • 0
    Вот почему я пытаюсь использовать полифилы!
  • 0
    При более глубоком рассмотрении ScopingShim из ShadyCSS кажется, что только CSS-правила, присутствующие в элементе, «инкапсулированы». Стили шаблона переписываются, эффективно добавляя класс с именем вашего пользовательского элемента, поэтому h2 my-element становится h2.my-element. Такое переписывание не учитывает, какие стили определены вне элемента - так коротко говоря: shim делает ваши стили более специфичными, но не обеспечивает инкапсуляцию, как нативный ShadowDOM.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню