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

Я пытаюсь использовать 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>

javascript web-component firefox shadow-dom html5-template
person Mathieu Mahé    schedule 02.11.2017    source источник
comment
Предоставьте в своем сообщении минимально воспроизводимый пример.   -  person TylerH    schedule 02.11.2017
comment
jsbin недостаточно? вставлю в ответ!   -  person Mathieu Mahé    schedule 02.11.2017
comment
Нет, вам нужно указать MCVE в самом вопросе; не просто ссылайтесь на один сторонний сайт. MCVE также включает в себя другие части, помимо демонстрации кода. Обязательно прочитайте эту ссылку.   -  person TylerH    schedule 02.11.2017

Ответы (3)


arrow_upward
1
arrow_downward

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

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>

person Supersharp    schedule 03.11.2017

arrow_upward
0
arrow_downward

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

person Stefan Reimers    schedule 02.11.2017
comment
Вот почему я пытаюсь использовать полифиллы! - person Mathieu Mahé; 02.11.2017
comment
При более глубоком рассмотрении ScopingShim в ShadyCSS кажется, что инкапсулированы только правила CSS, присутствующие в элементе. Стили шаблона переписаны, эффективно добавлен класс с именем вашего пользовательского элемента, поэтому h2 моего элемента становится h2.my-element. Такое переписывание не принимает во внимание, какие стили определены вне элемента — короче говоря: прокладка делает ваши стили более конкретными, но не требует инкапсуляции, как родной ShadowDOM. - person Stefan Reimers; 02.11.2017
comment
Это то, что я видел в консоли разработчика, но я не был уверен, что все работает так, как задумано! Вы знаете, как это сделать? - person Mathieu Mahé; 02.11.2017
comment
Вы можете начать возиться со всеми определенными стилями (см. stackoverflow.com/questions/2952667/) и перезаписывают правила для вашего элемента. Но это может быть громоздким путем. В качестве альтернативы вы можете установить для всех стилей их начальное значение, например. h2 {все: начальный; цвет: синий;} в вашем элементе. Но это также установит заголовки font-size и font-weight, что может быть не тем, что вам нужно. Думаю, если бы был более простой способ, ShadyCSS пошел бы по нему. - person Stefan Reimers; 02.11.2017
comment
Хм, ты прав. Я попробую что-нибудь с all: initial, а затем верну CSS по умолчанию для Firefox. Если это работает и если это хорошо для моего босса, это будет временное решение, ожидающее, пока Firefox завершит внедрение Shadowdom :) Спасибо за помощь! - person Mathieu Mahé; 03.11.2017

arrow_upward
0
arrow_downward

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

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

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

person Intervalia    schedule 15.11.2017