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

Ответ 1

Здесь есть интересная и глубокая статья из 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!');
});

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

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

Ответ 2

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

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

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

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

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

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

  document.createElement('my-book');
  

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

Ответ 3

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

Пример:

mytag {
font-weight: bold;
}

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

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

Ответ 4

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

Ответ 5

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

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

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

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

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

<x-foo></x-foo>

Создайте 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 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);

Ответ 6

Существует также версия, которая ТОЛЬКО поддерживается в Chrome 54 и Opera.

Пример:

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

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

Ответ 7

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