Shadow DOM v1 CSS polyfill

Question

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

这让我非常兴奋，我可以在没有聚合物的情况下从头开始编写自己的自定义网页。

才发现 css :host 例如在 Edge 和 FireFox 中不起作用。我现在可以不用 html import 处理，直到 w3c 弄清楚他们想用 es6 模块做什么，但是每个浏览器都有自己的半实现 Shadow DOM 版本没有 css正在推动我的按钮。

所以我仍然需要一个完整的聚合物堆栈来在所有浏览器中拥有 webcomponents。

<script src="../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../hello-world.html">

<hello-world>Hello World Polymer 2.x</hello-world>

有谁知道如何填充 Edge 和 FireFox 以获得真正的 Shadow DOM，而不是假装的原生 Shadow DOM？

这是我尝试过的方法，但我不知道如何告诉 Edge 和 FireFox 将他们的影子崇拜者放在其他地方并使用 shadydom/shadycss。

https://jsbin.com/quvozo

<!DOCTYPE html>
<html>

<head>
  <title>Components</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
</head>

<body>
  <hello-world>Hello World ES2015</hello-world>
  <script>
    function loadScript(src, main) {
      return new Promise(function(resolve, reject) {
        const script = document.createElement('script');
        script.async = true;
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    }
    let polyfilled = false;
    const loadPromises = [];
    if (!('customElements' in window)) {
      loadPromises.push(loadScript('https://raw.githubusercontent.com/webcomponents/custom-elements/master/custom-elements.min.js'));
    }
    if (!HTMLElement.prototype.attachShadow) {
      polyfilled = true
      loadPromises.push(loadScript('https://raw.githubusercontent.com/webcomponents/shadydom/master/shadydom.min.js'));
      loadPromises.push(loadScript('https://raw.githubusercontent.com/webcomponents/shadycss/master/shadycss.min.js'));
    }
    Promise.all(loadPromises)
      .then(e => console.log(`polyfilled ${polyfilled}`))
      .then(e => {
        class HelloWorld extends HTMLElement {
          constructor() {
            super()
            this.template = document.createElement('template')
            this.template.innerHTML = `
              <style>
                :host {
                  display: block;
                  box-sizing: border-box;
                  border: 1px solid red;
                  margin-top: 10px;
                  padding: 0px 5px;
                }
              </style>
              <p>Test <slot></slot></p>
            `
            if (polyfilled) ShadyCSS.prepareTemplate(this.template, 'hello-world');
          }
          connectedCallback() {
            const shadowRoot = this.attachShadow({ mode: 'open' })
            shadowRoot.appendChild(this.template.content.cloneNode(true))
            if (polyfilled) ShadyCSS.applyStyle(this);
          }
        }
        customElements.define('hello-world', HelloWorld)
      })
  </script>
</body>

</html>

Answer 1

Shadow DOM polyfill 不会创建 real Shadow DOM 但是 normal DOM 元素，
自定义元素规范 won't allow you 在 normal DOM 树中添加元素 constructor(),

因此，您应该 attach fake Shadow DOM 之后，即在 connectedCallback() 方法内部，而不是在 constructor()方法。

ShadyCSS polyfill 适用于 Edge 和 Firefox。

Shadow DOM v1 CSS polyfill

Shadow DOM v1 CSS polyfill

firefox

microsoft-edge

shadow-dom

custom-element

shady-dom