Как создать пользовательские tags для html

Я хотел бы узнать, как создавать пользовательские tags для html, со специальными атрибутами и поведением, если кто-то может дать совет, я был бы самым благодарным.

Solutions Collecting From Web of "Как создать пользовательские tags для html"

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

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

Создание элементов

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

Объявите их:

 

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

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

Используйте новый оператор:

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

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

 The Wanderer and His Shadow 

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

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

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

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

     document.createElement('my-book'); 

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

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

пример:

 mytag { font-weight: bold; } 

и теперь mytag – ваш собственный смелый:

 This text is in bold 

В настоящее время существует новая стандартная спецификация W3, называемая пользовательскими элементами веб-компонентов , которая позволяет разработчикам создавать собственные пользовательские элементы 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); 

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

Вы можете создавать пользовательские tags html со следующими шагами:

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

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

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

Шаг 2. Создание собственных тегов Несколько способов сделать это: объявить их:

  

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

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

Используйте новый оператор:

 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); 

вы можете использовать javascript: document.createElement('element')