4

现在，如果您遵循自定义元素规范 v1的确切规范，则无法在不支持类的浏览器中使用自定义元素。

有没有办法在不使用类语法的情况下创建 v1 自定义元素，以便它们在 Chrome、FireFox 和 IE11 中完全正常运行。此外，由于 IE11 没有对自定义元素的原生支持，我假设我们可能需要使用一些 pollyfill，那么我们需要哪些 polyfill 或库才能在 IE11 中使用？

我已经搞砸了 Polymer 2、Polymer 3 和 Stencil，但对于我们想要创建的一些东西来说，它们都有点繁重。

这个问题似乎在正确的轨道上，但我在 IE11 中使用它时遇到了一些麻烦，那么我如何在 IE11 中使用 Reflect.construct 来实现自定义元素？

4

1 回答 1

7

这是使用 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>

于 2018-05-11T15:35:22.047 回答