JavaScript
Пользовательские элементы

Angular 2 AngularJS ASP.NET CSS HTML jQuery Node.js PHP React Regular Expressions

Синтаксис

.prototype.createdCallback ()
.prototype.attachedCallback ()
.prototype.detachedCallback ()
.prototype.attributeChangedCallback (имя, oldValue, newValue)
document.registerElement (имя, [опции])

параметры

параметр	подробности
название	Имя нового настраиваемого элемента.
options.extends	Имя расширенного элемента, если оно есть.
options.prototype	Пользовательский прототип для использования для пользовательского элемента, если он есть.

замечания

Обратите внимание, что спецификация Custom Elements еще не стандартизирована и может быть изменена. В документации описывается версия, которая была отправлена в Chrome stable в настоящее время.

Пользовательские элементы - это функция HTML5, позволяющая разработчикам использовать JavaScript для определения пользовательских тегов HTML, которые можно использовать на своих страницах, с соответствующими стилями и поведением. Они часто используются с теневым домиком .

Регистрация новых элементов

Определяет пользовательский элемент <initially-hidden> который скрывает его содержимое до истечения заданного количества секунд.

const InitiallyHiddenElement = document.registerElement('initially-hidden', class extends HTMLElement {
  createdCallback() {
    this.revealTimeoutId = null;
  }

  attachedCallback() {
    const seconds = Number(this.getAttribute('for'));
    this.style.display = 'none';
    this.revealTimeoutId = setTimeout(() => {
      this.style.display = 'block';
    }, seconds * 1000);
  }

  detachedCallback() {
    if (this.revealTimeoutId) {
      clearTimeout(this.revealTimeoutId);
      this.revealTimeoutId = null;
    }
  }
});

<initially-hidden for="2">Hello</initially-hidden>
<initially-hidden for="5">World</initially-hidden>

Расширение родных элементов

Можно расширить родные элементы, но их потомки не имеют собственных имен тегов. Вместо этого, is атрибут используется для указания подкласса элемента предполагается использовать. Например, это расширение элемента <img> который регистрирует сообщение на консоли при его загрузке.

const prototype = Object.create(HTMLImageElement.prototype);
prototype.createdCallback = function() {
  this.addEventListener('load', event => {
      console.log("Image loaded successfully.");
  });
};

document.registerElement('ex-image', { extends: 'img', prototype: prototype });

<img is="ex-image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png" />

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow