Допустимы ли пользовательские элементы HTML5?

Это возможно и разрешено:

агенты пользователей должны считать элементы и атрибуты, которые они не понимать как семантически нейтральные; оставляя их в DOM (для DOM процессоры), и стилизация их в соответствии с CSS (для процессоров CSS), но не выводя из них никакого смысла.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

но, если вы собираетесь добавить интерактивность, вам нужно будет сделать ваш документ недействителен (но все еще полностью функциональный) для размещения IE 7 и 8.

см.http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (мой блог)

это фактически следствие накопления содержательной модели элементов.

например, корневой элемент должен быть html элемент.

The html элемент может содержать только элемент головы, за которым следует элемент тела.

The body элемент может содержать только содержимое потока где содержание потока определяется как элементы: a, сокр, адрес, уголок (если это потомок элемента карты), статья, в сторону, звуковой, б, бди, bdo, цитата, бром, кнопка, холст, цитировать, код, команда, таблицы, дель, подробности, dfn, элемент div дл, ЭМ, внедрять, элемент fieldset, фигура, нижняя сноска, форма, h1, h2, h3, h4, h5, h6, заголовок, гігроскоп, человеческие ресурсы, я, фрейм, НВФ, вход, ins, рэоз, генератор ключей, этикетка, карта, отметка, математика, меню, измеритель, навигация, тега NoScript, объект, пр, выход, p, пред, достижения, вопрос, рубин, с, плата SAMP, скрипт, раздел, выбирать, маленький, промежуток, сильный, стиль (если присутствует атрибут scoped), подводная лодка, поужинать, формат SVG, стол, элемент textarea, время, у, ул, Вар, видео, ВБР и текст

и так далее.

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

основные пользовательские элементы и атрибуты

пользовательские элементы и атрибуты допустимы в HTML, при условии, что:

• имена элементов строчные и начинаются с x-
• имена атрибутов строчные и начинаются с data-

например, <x-foo data-bar="gaz"/> или <br data-bar="gaz"/>.

общее Соглашение для элементов x-foo;x-vendor-feature рекомендуется.

это обрабатывает большинство случаев, так как это возможно, редко, что разработчику понадобится вся сила, которая поставляется с регистрацией их элементов. Синтаксис также достаточно корректен и стабилен. Более подробное объяснение приведено ниже.

расширенные пользовательские элементы и атрибуты

в 2014 году появился новый, значительно улучшенный способ регистрации пользовательских элементов и атрибутов. Он не будет работать в старых браузерах, таких как IE 9 и Chrome и Firefox 20. Но это позволяет использовать стандарт HTMLElement интерфейс, предотвращения столкновений, используйте non-x-* и неdata-* имена и определение пользовательского поведения и синтаксиса для браузера, чтобы уважать. Это требует немного фантазии JavaScript, как подробно описано в ссылках ниже.

HTML5 Rocks-определение новых элементов в HTML
WebComponents.org -введение в пользовательские элементы
W3C-веб-компоненты: пользовательские элементы

относительно правильности основного синтаксиса

используя data-* для пользовательских имен атрибутов был совершенно действителен в течение некоторого времени, и даже работает с более старыми версиями HTML.

W3C-HTML5: расширяемость

что касается пользовательских (незарегистрированных) имен элементов, W3C настоятельно рекомендует их не использовать и считает их несоответствующими. Но браузеры необходимы для их поддержки, и x-* идентификаторы не будут конфликтовать с будущими спецификациями HTML и x-vendor-feature идентификаторы не будут конфликтовать с другими разработчиками. Пользовательский DTD может использоваться для работы с любыми придирчивыми браузерами.

вот некоторые соответствующие выдержки из официальных документов:

"применимые спецификации могут определять новое содержание документа (например, a элемент фрагментик) [...]. Если синтаксис и семантика данного соответствующий документ HTML5 не изменяется при использовании применимого спецификация(ы), то этот документ остается соответствующим HTML5 документ."

" агенты пользователей должны обрабатывать элементы и атрибуты, которых у них нет понимать как семантически нейтральные; оставляя их в DOM (для DOM процессоры), и стилизация их в соответствии с CSS (для процессоров CSS), но не выводя из них никакого смысла."

"агенты пользователей не могут свободно обрабатывать несоответствующие документы, поскольку они пожалуйста; модель обработки описанная в этой спецификации применяется к реализациям независимо от соответствия входных данных документы."

" The Интерфейс HTMLUnknownElement должен использоваться для HTML элементов, которые не определены этой спецификацией."

W3C-HTML5: соответствующие документы
WHATWG как средство - стандартный HTML-код: DOM-элементами

Я хотел бы отметить, что слово "действительное" может иметь два разных значения в данном контексте, любой из которых потенциально, ум, силу.

1. должен ли HTML-документ с пользовательскими тегами считаться допустимым HTML5? Ответ на это очевиден: "нет."спец перечисляет, какие именно теги допустимы в каких контекстах. Вот почему валидатор HTML не будет принимать документ с пользовательскими тегами или со стандартными тегами в неправильных местах (например, тег "img" В заголовке).

2. будет ли HTML-документ с пользовательскими тегами анализироваться и отображаться стандартным, четко определенным способом в разных браузерах? Здесь, возможно, удивительно, ответ: "да."Даже если документ технически не будет считаться действительным HTML5, спецификация HTML5 указать именно то, что браузеры должны делать, когда они видят пользовательский тег: короче говоря, пользовательский тег действует как <span> - Это ничего не значит и ничего не делает по умолчанию, но он может быть стилизован HTML и доступен javascript.

пользовательские HTML-элементы-это новый стандарт W3, в который я вносил свой вклад, что позволяет вам объявлять и регистрировать пользовательские элементы с помощью парсера, вы можете прочитать спецификацию здесь: спецификации пользовательских элементов веб-компонентов W3. Кроме того, Microsoft поддерживает библиотеку (написанную бывшими разработчиками Mozilla) под названием X-Tag - это делает работу с веб-компонентами еще проще.

слово раздел расширяемости спецификации HTML5:

для функций уровня разметки, которые могут быть ограничены сериализацией XML и не должны поддерживаться в сериализации HTML, поставщики должны использовать механизм пространства имен для определения пользовательских пространств имен, в которых поддерживаются нестандартные элементы и атрибуты.

поэтому, если вы используете XML-сериализацию HTML5, ее законно для вас сделать что-то вроде это:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

однако, если вы используете синтаксис HTML вы гораздо более ограничены в том, что вы можете сделать.

для функций уровня разметки, предназначенных для использования с синтаксисом HTML, расширения должны быть ограничены новыми атрибутами формы "x-vendor-feature" [...] Новые имена элементов не должны создаваться.

но эти инструкции в первую очередь направлены на поставщиков браузеров, которые предположительно будут предоставлять визуальный стиль и функциональность для любых пользовательских элементов, которые они выбрали для создания.

для автора, хотя это может быть законным, чтобы внедрить пользовательский элемент на странице (по крайней мере, в XML-сериализации), вы не получите ничего больше, чем узел в DOM. Если вы хотите, чтобы ваш пользовательский элемент действительно что-то делал или отображался каким-то особым образом, вы должны смотреть на спецификация пользовательских элементов.

для более нежного праймера на предмете, прочитайте элемент Введение Веб-Компонентов, который также включает информацию о теневом 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-более поздняя версии работают совсем по-другому. Однако, поскольку спецификация все еще находится в разработке, это не то, что я бы рекомендовал использовать в производственном коде в любом случае.

чтобы дать обновленный ответ, отражающий современные страницы.

пользовательские теги действительны, если либо,

1) Они содержат прочерк

<my-element>

2) они встроены XML

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

это предполагает, что вы используете HTML5 doctype <!doctype html>

учитывая эти простые ограничения, теперь имеет смысл сделать все возможное, чтобы сохранить вашу разметку HTML действительной (пожалуйста, прекратите закрывать теги, такие как <img> и <hr>, это глупо и неправильно, если вы используйте доктип XHTML, который вам, вероятно, не нужен).

учитывая, что HTML5 четко определяет правила синтаксического анализа, совместимый браузер сможет обрабатывать любой тег, который вы бросаете на него, даже если он не является строго допустимым.

data-* атрибуты действительны в HTML5 и даже в HTML4 все веб-браузеры используются для их уважения. Добавление новых тегов технически нормально, но не рекомендуется только потому, что:

1. это может конфликтовать с чем-то добавленным в будущем, и
2. делает документ HTML недействительным, если он не добавлен динамически через JavaScript.

я использую пользовательские теги только в тех местах, которые Google не заботит, для примера в игровом движке iframe, i сделал <log> тег, который содержится <msg>,<error> и <warning>, но через JavaScript только. И он был полностью действителен, согласно валидатору. Он даже работает в Internet explorer с его стилем! ;]

пользовательские теги недопустимы в HTML5. Но в настоящее время браузеры поддерживают их разбор, а также вы можете использовать их с помощью css. Так что если вы хотите использовать пользовательские теги для современных браузеров, то вы можете. Но поддержка может быть удалена, как только браузеры реализуют стандарты W3C строго для разбора содержимого HTML.

Я знаю, что этот вопрос старый, но я изучал этот предмет, и хотя некоторые из приведенных выше утверждений верны, они не являются единственным способом создания пользовательских элементов. Например:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

будет работать отлично (в новых версиях Google Chrome, IE, FireFox и mobile Safari до сих пор ). Все, что вам нужно, это просто Альфа-символ (a-z, A-Z), чтобы запустить тег, а затем вы можете использовать любой из не альфа-символов после. Если в CSS, вы должны использовать "\" (обратная косая черта) для того, чтобы найти элемент, например, потребуется запрос\^ { ... } . Но в JS вы просто называете это так, как вы это видите. Надеюсь, это поможет. См. пример здесь

- Mink CBOS