5

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

これにより、ポリマーを使用せずに独自のカスタム Web ページをゼロから作成できることに興奮しました。

:hostたとえば、CSSがEdgeとFireFoxで機能していないことを確認するためだけに。importw3cがes6モジュールで何をしたいのかを理解するまで、今のところhtmlなしで処理できますが、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 を持たせる方法を知っている人はいますか?

これは私が試したものですが、Edge と FireFox に Shadow ワナビーを別の場所に置き、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 ポリフィルは、実際のShadow DOMを作成するのではなく、通常のDOM 要素を 作成します。
  • Custom Elements 仕様では、通常のDOM ツリーに要素を追加することはできません。constructor()

したがって、後でメソッド内ではなく、メソッド内attachに偽のShadow DOM を作成する必要があります。connectedCallback()constructor()

ShadyCSS ポリフィルは、Edge と Firefox で正常に動作します。

于 2016-11-15T09:03:08.760 に答える