5

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

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

4

1 回答 1

3
  • Shadow DOM polyfill 不会创建真正的Shadow DOM，而是创建普通的DOM 元素，
  • 自定义元素规范不允许您在普通DOM 树中添加元素constructor()，

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

ShadyCSS polyfill 适用于 Edge 和 Firefox。

于 2016-11-15T09:03:08.760 回答