Я пытаюсь использовать 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>
Вы можете использовать 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>
Полипол не может эмулировать инкапсуляцию CSS, которая обрабатывается изначально с помощью истинного ShadowDOM.
Вместо этого, если вы планируете использовать оба варианта, избегайте использования простых селекторов CSS. Вместо этого попробуйте использовать шаблон именования CSS, например BEM: http://getbem.com/introduction/
Это позволит вашему CSS работать в большинстве случаев как в истинном ShadowDOM, так и в ShadyDOM.
Согласно странице состояния платформы Mozillas, Shadow DOM все еще находится в разработке. https://platform-status.mozilla.org/#shadow-dom