Вопрос по html, tags – Вы можете использовать JavaScript:

36

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

Вы ищете CSS. SLaks
Не знаю, если вы можете сделать это в чистом HTML, но, возможно, вы можете использовать XHTML, часть XML имеет собственные теги, сделанные вами John
Пожалуйста, отправьте ответ, а не редактируйте ответ на свой вопрос. NobodyNada

Ваш Ответ

7   ответов
27

как работать с пользовательскими элементами:Пользовательские элементы: определение новых элементов в 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);
Обновленная спецификация для пользовательских элементов v1: повторно используемые веб-компонентыdevelopers.google.com/web/fundamentals/getting-started/primers/... Stevko
Стоит отметить, что это правильный способ сделать это с точки зрения стандартов и поддержки браузера.foo-bar всегда следует использовать для имен пользовательских тегов (требуется дефис,x- является общим), иdata-foo всегда следует использовать для пользовательских атрибутов (data- требуется). Браузеры могут обрабатывать или не обрабатывать произвольные теги, такие какfoo Что ж. Обычно они не вызывают ошибок, но это совершенно нестандартно и может вызвать проблемы в некоторых ситуациях. Также обратите внимание, что контент, не относящийся к HTML5, должен использовать не строгий тип документа. JS можно использовать для обхода ограничения атрибута «data-», но это неуклюже. Beejor
6

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

2

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

Пример:

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

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

Теперь это работает и в Safari:caniuse.com/#search=custom%20elements%20v1 Supersharp
Приятно знать, приятель, спасибо. Felipe Alarcon
2

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

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

2-й аргумент в 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'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);
Ошибка типа: document.registerElement не является функцией. (В «document.registerElement ()» «document.registerElement» не определено) Alessandro Mascolo
Это не работает для меня. Supercolbat
Предупреждение: document.registerElement () устарела в пользу customElements.define (). ИсточникMDN Felipe Alarcon
28

что вы подразумеваете под «специальными атрибутами и поведением», вы можете «создавать» собственные теги 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.

Я собирался создать тег <hasjs>, который был бы скрыт для пользователей с js-отключением, но теперь я должен сначала зарегистрировать его с помощью JavaScript. Думаю, мне придется придерживаться <div class = "hasjs">. apokaliptis
0

document.createElement('element')

12

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

пример:

mytag {
font-weight: bold;
}

и теперь mytag - ваш собственный жирный шрифт

<mytag>This text is in bold</mytag>
Я знаю, что это по крайней мере работает для Google Chrome 47 tylerr147
Конечно, это работает в Chrome 47, но это не рекомендуется, так как это просто недействительный HTML. Chrome может обрабатывать широкий спектр недопустимого кода, и пока он это делаетработайВы действительно не должны полагаться на это слишком сильно, поскольку его поведение в других браузерах может быть совершенно произвольным. vrugtehagel

Похожие вопросы