Question

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

这让我很兴奋，我可以从头开始编写自己的自定义网页而不使用聚合物。

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

所以我仍然需要一个完整的聚合物堆栈才能在所有浏览器中使用web组件。

<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

＆＃13;

<!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>

＆＃13;

Answer 1

Shadow DOM polyfill不会创建真正的 Shadow DOM但是普通的 DOM元素，
自定义元素规范won't allow you，用于在constructor()中普通 DOM树中添加元素，

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

ShadyCSS polyfill适用于Edge和Firefox。

Shadow DOM v1 CSS polyfill

1 个答案: