Создание пользовательских элементов v1 в ES5, а не ES6 - PullRequest
Новая
       43

Создание пользовательских элементов v1 в ES5, а не ES6

0 голосов
/ 11 мая 2018

Прямо сейчас, если вы будете следовать точным спецификациям v1 спецификации пользовательских элементов , вы не сможете использовать пользовательские элементы в браузерах, которые не поддерживают классы.

Есть ли способ создания пользовательских элементов v1 без с использованием синтаксиса класса, чтобы они полностью работали в Chrome, FireFox и IE11. Кроме того, поскольку IE11 не имеет встроенной поддержки пользовательских элементов, я предполагаю, что нам, вероятно, понадобится использовать некоторые pollyfills, так что какие полифилы или библиотеки нам нужны для того, чтобы это работало в IE11?

Я возился с Polymer 2, Polymer 3 и Stencil, но все они немного тяжелы для некоторых вещей, которые мы хотим создать.

Этот вопрос , кажется, находится на правильном пути, но у меня возникли некоторые проблемы с его настройкой в ​​IE11, поэтому также как я могу использовать Reflect.construct в IE11 для пользовательских элементов?

1 Ответ

0 голосов
/ 11 мая 2018

Вот полный пример написания ES5-совместимых пользовательских элементов с использованием спецификации v1 (кредит этот комментарий на 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>
...