Цитирование из раздела Расширяемость спецификации HTML5 :
Для функций уровня разметки, которые могут быть ограничены сериализацией XML и не должны поддерживаться в сериализации HTML, поставщики должны использовать механизм пространства имен для определения пользовательских пространств имен, в которых поддерживаются нестандартные элементы и атрибуты.
Так что, если вы используете сериализацию XML HTML5, вы можете сделать что-то вроде этого:
* * 1010
Однако, если вы используете синтаксис HTML, вы гораздо более ограничены в своих возможностях.
Для функций уровня разметки, которые предназначены для использования с синтаксисом HTML, расширения должны быть ограничены новыми атрибутами формы "x-vendor-feature" [...] Не следует создавать новые имена элементов.
Но эти инструкции в первую очередь направлены на поставщиков браузеров, которые предположительно предоставили бы визуальные стили и функциональность для любых пользовательских элементов, которые они выбрали для создания.
Для автора, хотя может быть законным встроить пользовательский элемент в страницу (по крайней мере, в сериализацию XML), вы не получите ничего, кроме узла в DOM. Если вы хотите, чтобы ваш пользовательский элемент действительно что-то делал или отображался каким-то особым образом, вам следует обратиться к спецификации Custom Elements .
Для более подробного ознакомления с предметом прочитайте Введение в веб-компоненты , в котором также содержится информация о Shadow DOM и другие соответствующие спецификации. Эти спецификации все еще работают на данный момент - вы можете видеть текущий статус здесь - но они активно развиваются.
Например, простое определение элемента greeting может выглядеть примерно так:
<element name="greeting">
<template>
<style scoped>
span { color:gray; }
</style>
<span>Simon says:</span>
<q><content/></q>
</template>
</element>
Это говорит браузеру отображать содержимое элемента в кавычках с префиксом текста «Саймон говорит:», который оформлен в сером цвете. Как правило, пользовательское определение элемента, подобное этому, хранится в отдельном html-файле, который вы импортируете со ссылкой.
<link rel="import" href="greeting-definition.html" />
Хотя вы также можете включить его, если хотите.
Я создал рабочую демонстрацию вышеуказанного определения, используя библиотеку Polymer Polyfill, которую вы можете увидеть здесь . Обратите внимание, что здесь используется старая версия библиотеки Polymer - более поздние версии работают совсем по-другому. Однако, так как спецификация все еще находится в разработке, я бы не рекомендовал использовать ее в производственном коде.