ES6ではなくES5でカスタム要素v1を作成する

debugcn 投稿 Dev

TwitchBronBron

現在、カスタム要素仕様のv1の正確な仕様に従っている場合、クラスをサポートしていないブラウザーでカスタム要素を使用することはできません。

クラス構文を使用せずにv1カスタム要素を作成して、Chrome、FireFox、およびIE11で完全に機能するようにする方法はありますか。また、IE11はカスタム要素をネイティブでサポートしていないため、おそらくいくつかのポリフィルを使用する必要があると思います。IE11でこれを機能させるには、どのポリフィルまたはライブラリが必要ですか？

私はPolymer2、Polymer 3、およびStencilをいじりましたが、これらはすべて、作成したいもののいくつかに対して少し頑丈です。

この質問は正しい方向に進んでいるようですが、IE11で機能させるのに問題がありました。また、カスタム要素の目的でIE11でReflect.constructを使用するにはどうすればよいですか？

TwitchBronBron

これは、v1仕様を使用してES5互換のカスタム要素を作成する完全な例です（githubのこのコメントのクレジット）

<html>

<head>
  <!--pollyfill Reflect for "older" browsers-->
  <script src="https://cdn.rawgit.com/paulmillr/es6-shim/master/es6-shim.min.js"></script>
  <!--pollyfill custom elements for "older" browsers-->
  <script src="https://cdn.rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js"></script>
  <script type="text/javascript">
    function MyEl() {
      return Reflect.construct(HTMLElement, [], this.constructor);
    }

    MyEl.prototype = Object.create(HTMLElement.prototype);
    MyEl.prototype.constructor = MyEl;
    Object.setPrototypeOf(MyEl, HTMLElement);

    MyEl.prototype.connectedCallback = function() {
      this.innerHTML = 'Hello world';
    };
    customElements.define('my-el', MyEl);
  </script>
</head>

<body>
  <my-el></my-el>
</body>

</html>

また、タイプスクリプト愛好家のために、ES5にコンパイルされたときにも機能するタイプスクリプトを使用してカスタム要素を作成する方法を次に示します。

<html>
<head>
    <!--pollyfill Reflect for "older" browsers-->
    <script src="https://cdn.rawgit.com/paulmillr/es6-shim/master/es6-shim.min.js"></script>
    <!--pollyfill custom elements for "older" browsers-->
    <script src="https://cdn.rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js"></script>
    <script type="text/typescript">
        class MyEl extends HTMLElement{
          constructor(){
              return Reflect.construct(HTMLElement, [], this.constructor);
            }  
            
            connectedCallback () {
              this.innerHTML = 'Hello world';
          }
        }

        customElements.define('my-el', MyEl);
    </script>

</head>

<body>
    <my-el></my-el>
    <!-- include an in-browser typescript compiler just for this example -->
    <script src="https://rawgit.com/Microsoft/TypeScript/master/lib/typescriptServices.js"></script>
    <script src="https://rawgit.com/basarat/typescript-script/master/transpiler.js"></script>
</body>

</html>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]