Стиль Shadow DOM v1 с полифиллом

Я пытаюсь работать только с ShadowDOM v1 (без Polymer или других веб-компонентов), но не могу заставить стиль работать с полифиллом.

Специальные селекторы CSS :host и ::slotted не работают.

Я пробовал с разными polyfills, но, честное слово, я немного запутался. Я видел этот вопрос, но он использует пользовательские элементы и шаблоны. Мой сценарий без них.

Может ли кто-нибудь помочь мне заставить этот код работать в Firefox или Edge? - в частности, вы должны увидеть три цвета: синий, красный и желтый, но работает только красный.

const shadowHtml =
  `<style>
    :host {
      background: yellow;
    }
    .inside {
      background: red;
      margin: 10px;
    }
    ::slotted(div[slot="content"]) {
      background: blue;
      color: white;
    }
    </style>
    <div>
      <p>i am yellow</p>
      <div class=inside>i am red</div>
      <slot name="content"></slot>
    </div>`;
  

const root = document.querySelector('#root');
const shadow = root.attachShadow({ mode: 'open' });
shadow.innerHTML = shadowHtml;
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Shadow DOM v1 Test</title>
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/v1/webcomponents-lite.js"></script>
</head>
<body>
  <div id=root>
    <div slot="content">
      <p>I am blue</p>
    </div>
  </div>
</body>
</html>


javascript web-component firefox shadow-dom html5-template
person Phil Mander    schedule 18.02.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

webcomponents-lite.js "v1" теперь включает полифилл Shadow DOM v1. :

  • ShadyDOM, который обеспечивает attachShadow()
  • объект ShadyCSS, который имитирует :host и ::slotted().

Обратите внимание, что для его использования вам нужно поместить строку шаблона в элемент <template>, чтобы вызвать ShadyCSS.prepareTemplate().

const makeTemplate = function (strings) {
    const template = document.createElement('template');
    template.innerHTML = strings[0];
    return template;
}

const shadowHtml =
  makeTemplate`<style>
    :host {
      background: yellow;
    }
    .inside {
      background: red;
      margin: 10px;
    }
     ::slotted(div[slot="content"]) {
      background: blue;
      color: white;
    }
    </style>
    <div>
      <p>i am yellow</p>
      <div class=inside>i am red</div>
      <slot name="content"></slot>
    </div>`
ShadyCSS.prepareTemplate(shadowHtml, 'div');
  
const root = document.querySelector('#root');
const shadow = root.attachShadow({ mode: 'open' });
shadow.innerHTML = shadowHtml.innerHTML;
<script src="https://cdn.rawgit.com/webcomponents/shadydom/master/shadydom.min.js"></script>
<script src="https://cdn.rawgit.com/webcomponents/shadycss/master/scoping-shim.min.js"></script>

<div id=root>
  <div slot="content">
    <p>I am blue</p>
  </div>
</div>

person Supersharp    schedule 18.02.2017
comment
Большое спасибо за это! Кстати, фрагмент кода, который я включил, использовал полифилл из ветки v1, который на самом деле включить поддержку Shadow DOM в webcomponents-lite.js. Похоже, что в него также включен ShadyCSS, и ваше решение продолжает работать, используя его вместо этого. Я предполагаю, что полифилы ShadyDOM и ShadyCSS в настоящее время более стабильны. - person Phil Mander; 19.02.2017
comment
@PhilMander ты прав! Я исправил свой ответ. - person Supersharp; 19.02.2017
comment
Я создаю библиотеку пользовательских элементов, поэтому пишу на JS, поэтому кажется непрактичным использовать JavaScript для создания элемента шаблона и помещать его в DOM только для того, чтобы я мог получить его содержимое для своего пользовательского элемента с помощью ShadyDOM. Я хотел бы просто использовать строки шаблона, и я хочу, чтобы он работал с собственным теневым Домом, немного просто с теневым Домом, поэтому, к сожалению, этот ответ не подходит для моего случая. (Или я что-то пропустил?) - person trusktr; 07.12.2017
comment
Шаблон @trusktr не нужно помещать в DOM - person Supersharp; 07.12.2017
comment
Упс, ты прав. Думаю, я вообще не хочу создавать элемент шаблона. Я просто хочу сделать следующее, поэтому я спросил на их GitHub, возможно ли это (неясно, возможно ли): github.com/webcomponents/shadycss/issues/144 - person trusktr; 11.12.2017