Блог

Как я могу создать пользовательские мета-теги для HTML со специальными атрибутами и поведением?

В зависимости от того, что вы подразумеваете под «особыми атрибутами и поведением», вы можете «создавать» пользовательские HTML-теги прямо сейчас. Следующее отображается во всех браузерах и даже работает с различными методами JavaScript:

 <my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>
  

Есть всего пара вещей, которые вы должны иметь в виду:

0. Перенос! Пользовательские элементы должны состоять хотя бы из одного - like my-book или app-menu или header-title и т.д. Просто не используйте, data-* поскольку он зарезервирован для атрибутов данных.

1. По умолчанию все пользовательские элементы отображаются как inline . Однако вы можете изменить это с помощью CSS или JavaScript.

2. Internet Explorer не распознает ни один из этих элементов, если вы сначала не «создадите» их с помощью JavaScript:

     document.createElement('my-book');
     

Итак, вам нужно сделать это, прежде чем вы сможете использовать их в вашем CSS, HTML или JavaScript.

Есть интересная и подробная статья от HTML5Rocks.com о том, как работать с пользовательскими элементами: Пользовательские элементы: определение новых элементов в HTML

Вот выдержка из статьи о том, как это сделать.

Создание экземпляров элементов

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

Объявите их:

 <x-foo></x-foo>
  

Создайте DOM в JS:

 var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
    alert('Thanks!');
});
  

Используйте оператор new:

 var xFoo = new XFoo();
document.body.appendChild(xFoo);
  

Все, что вам действительно нужно сделать, это определить содержимое CSS для этого тега.

Пример:

 mytag {
    font-weight: bold;
}
  

И теперь mytag выделен вашим собственным жирным шрифтом:

 <mytag>This text is in bold</mytag>
  

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

Mozilla разработала библиотеку под названием X-Tag, которая упрощает процесс создания пользовательских элементов и работы с ними, ознакомьтесь с ней:X-Tags.org

Существует также версия, которая поддерживается только в Chrome 54 и Opera.

Пример:

 class BasicElement extends HTMLElement {
    connectedCallback() {
        this.textContent = 'Just a basic custom element.';
    }
}
customElements.define('basic-element', BasicElement);
  

Вы можете узнать больше об этом здесь.

Вы можете создать пользовательские HTML-теги, выполнив следующие действия:

Шаг 1 — Зарегистрируйте новый элемент. Пользовательские элементы создаются с помощью document.registerElement():

 var XFoo = document.registerElement('x-foo', {
    prototype: Object.create(HTMLElement.prototype)
});
  

Второй аргумент в registerElement является необязательным объектом, который описывает прототип элемента.

Шаг 2 — Создание пользовательских тегов

Для этого есть несколько способов:

Объявите их:

 <x-foo></x-foo>
  

Создать DOM в JavaScript:

 var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
    alert('Thanks!');
});
  

Используйте оператор new:

 var xFoo = new XFoo();
  

Шаг 3 — Прикрепите вновь созданный элемент к документу

 document.body.appendChild(new XFoo());
  

Полный пример:

 var XFooProto = Object.create(HTMLElement.prototype);

// 1. Give x-foo a foo() method.
XFooProto.foo = function() {
  alert('foo() called');
};

// 2. Define a property read-only "bar".
Object.defineProperty(XFooProto, "bar", {value: 5});

// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');

// 5. Add it to the page.
document.body.appendChild(xfoo);