带有 polyfill 的 Shadow DOM v1 样式答案

【问题标题】：Shadow DOM v1 styling with polyfill带有 polyfill 的 Shadow DOM v1 样式
【发布时间】：2017-02-18 12:25:07
【问题描述】：

我正在尝试仅使用 ShadowDOM v1（没有 Polymer 或其他 Web 组件），但我无法让样式与 polyfill 一起使用。

特殊的 :host 和 ::slotted CSS 选择器不起作用。

我试过various polyfills，但是TBH，我有点迷路了。我见过this question，但它使用的是自定义元素和模板。我的场景没有这些。

谁能帮我让这段代码在 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 firefox web-component shadow-dom html5-template

【解决方案1】：

webcomponents-lite.js “v1”现在嵌入了 Shadow DOM v1 填充：

提供attachShadow()的ShadyDOM垫片
模拟:host和::slotted()的ShadyCSS对象。

请注意，要使用它，您必须将模板字符串放在 <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>

【讨论】：

非常感谢！顺便说一句，我包含的代码 sn-p 使用了来自 v1 branch 的 polyfill，它实际上在 webcomponents-lite.js 中包含了 Shadow DOM 支持。它似乎也包含 ShadyCSS 并且您的解决方案继续使用它来工作。我假设 ShadyDOM 和 ShadyCSS polyfills 目前更稳定。
@PhilMander 你是对的！我已经更正了我的答案。
我正在制作一个自定义元素库，因此使用 JS 编写，因此必须使用 JavaScript 创建模板元素并将其放入 DOM 以便我可以获取它的内容似乎不切实际对于我使用 ShadyDOM 的自定义元素。我只想使用模板字符串，并且我希望它与本机影子 Dom 一起使用，只是有点阴暗的 Dom，所以不幸的是，这个答案不能回答我的情况。（或者我错过了什么？）
@trusktr 模板不需要放入 DOM
哎呀，你是对的。我想我根本不想创建模板元素。我只是想做以下事情，所以我在他们的 GitHub 上询问是否可以（不清楚是否可以）：github.com/webcomponents/shadycss/issues/144