HTML5: создайте пользовательский элемент

Question

HTML5: создайте пользовательский элемент

1

Я пытаюсь создать пользовательский элемент, который имеет функцию, которая может быть вызвана из Jscript, но я не могу заставить ее работать и не вижу, что неправильно... Мой код:

<html>
<head>
<script language="javascript" type="text/javascript">

var XFooPrototype = Object.create(HTMLButtonElement.prototype);
XFooPrototype.foo = function() {
   alert("foo");
}

document.registerElement('x-foo', {
   prototype: XFooPrototype
});

document.addEventListener("DOMContentLoaded", function(event) {
   var mytag = document.getElementById("my_tag");
   mytag.foo();
});

</script>
</head>
<body>
   <x-foo id="my_tag"></x-foo>
</body>
</html>

Я бы выделил, что вызван foo(), и появляется предупреждение "foo", но вместо этого foo() не определяется, когда я его вызываю. Может ли кто-нибудь указать мне на то, что неправильно?

(Я знаю, что я должен использовать class/extend и customElements.define, но это нужно запускать и в старых браузерах)

Спасибо!

user2429124 30 нояб. 2017, в 17:44

Источник

0

Используйте стиль веб-компонентов V1 и используйте Polyfills. Они работают обратно в IE11 (при условии, что вы используете custom-elements-es5-adapter.js для любого кода, переданного в ES5. Но лучше всего переносить только для IE11.
Intervalia 25 дек. 2017, в 18:53

Теги:

javascript

html5

1 ответ

Ещё вопросы

Используйте стиль веб-компонентов V1 и используйте Polyfills. Они работают обратно в IE11 (при условии, что вы используете custom-elements-es5-adapter.js для любого кода, переданного в ES5. Но лучше всего переносить только для IE11.

Ariful Islam · Answer 1 · 2017-12-25T15-34-00.000Z

document.registerElement устарел в пользу customElements.define(). document.registerElement устарел даже до того, как большинство браузеров это узнали.

Поэтому ваш текущий код не должен работать в большинстве случаев. Новый способ создания пользовательского элемента is-

<html>

<head>
</head>

<body>
  <x-foo id="my_tag"></x-foo>

  <script language="javascript" type="text/javascript">
    class MyElement extends HTMLElement {
      constructor() {
        super()
      }
      foo() {
        alert("foo");
      }
    }
    window.customElements.define('x-foo', MyElement);

    document.addEventListener("DOMContentLoaded", function(event)     {
      var mytag = document.getElementById("my_tag");
      mytag.foo();
    });
  </script>

</body>

</html>

В настоящее время Chrome поддерживает это. Другие идут.

Пользовательский элемент, поддерживаемый старыми браузерами, может быть создан с использованием Polymer.