Чи користувацькі елементи дійсні HTML5?

Мені не вдалося знайти остаточної відповіді на те, чи є власні теги дійсними в HTML5, наприклад:

<greeting>Hello!</greeting>

Я не знайшов нічого в специфікації так чи інакше:

http://dev.w3.org/html5/spec/single-page.html

А користувацькі теги, схоже, не підтверджуються валідатором W3C.

Специфікація користувацьких елементів доступна в Chrome і Opera та стає доступною в інших браузерах . Він забезпечує засіб формальної реєстрації користувацьких елементів.

Спеціальні елементи - це нові типи елементів DOM, які можуть бути визначені авторами. На відміну від декораторів , які є бездержавними та ефемерними, користувацькі елементи можуть інкапсулювати стан та надати інтерфейси сценарію.

Спеціальні елементи - це частина більшої специфікації W3 під назвою Веб-компоненти , а також Шаблони, Імпорт HTML та DOM Shadow.

Веб-компоненти дозволяють авторам веб-додатків визначати віджети з рівнем візуальної багатства та інтерактивності, неможливим лише для CSS, а простота складання та повторного використання неможлива в бібліотеках сценаріїв сьогодні.

Однак із цієї чудової розповіді про розробників Google про користувацькі елементи v1:

Ім'я спеціального елемента повинно містити тире ( -). Отже <x-tags>, <my-element>і <my-awesome-app>є всі дійсні імена, поки <tabs>і <foo_bar>ні. Ця вимога полягає в тому, щоб HTML-аналізатор міг відрізняти спеціальні елементи від звичайних елементів. Він також забезпечує сумісність вперед, коли нові теги додаються в HTML.

Деякі ресурси

• Приклад веб-компонентів доступний на веб- сайті https://WebComponents.org
• WebComponents.js виконує функції заповнення веб-компонентів, поки вони не підтримуються повсюдно. Див. Також таблицю підтримки веб-браузера WebComponents.js та підтримку веб-браузера .

Це можливо і дозволено:

Користувацькі агенти повинні ставитися до елементів та атрибутів, які вони не розуміють як семантично нейтральні; залишаючи їх у DOM (для DOM-процесорів) та стилізуючи їх відповідно до CSS (для CSS-процесорів), але не випливає із них ніякого значення.

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

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

Дивіться http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (мій блог)

Примітка. Відповідь, подана нижче, була правильною, коли вона була написана у 2012 році. Відтоді справи трохи змінилися. Специфікація HTML тепер визначає два типи користувацьких елементів - "автономні користувацькі елементи" та "налаштовані вбудовані елементи". Перший може переходити будь-де, якщо очікується вміст фраз; який знаходиться в більшості місць всередині тіла, але не, наприклад, дітей ul або ol елементів, або в елементах таблиці, крім td, th або елементів підпису. Останні можуть переходити куди завгодно, де може стикатися елемент, який вони поширюють.

Це насправді наслідок накопичення змістової моделі елементів.

Наприклад, кореневим елементом повинен бути htmlелемент.

htmlЕлемент може містити тільки головний елемент , за яким слідує елемент тіла.

bodyЕлемент може містити тільки вміст потоку , де вміст потоку визначаються як елементи: a, abbr, адреса, область (якщо вона є нащадком елемента карти), стаття, вбік, аудіо, b, bdi, bdo, blockquote, br, кнопка, полотно, цитувати, код, команда, даталіст, del, деталі , dfn, div dl, em, embed, набір поля, фігура, колонтитул, форма, h1, h2, h3, h4, h5, h6, заголовок, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, мітка, карта, позначка, математика, меню, метр, нав, носкрипт, об’єкт, ol, вихід, p, попередньо, прогрес, q, рубін, s, samp, сценарій, розділ, виділити, малий, проміжок, сильний, стиль ( якщо присутній атрибут масштабування), sub, sup, svg, table, textarea, time,u, ul, var, video, wbr та Text

і так далі.

У жодній точці модель вмісту не говорить "ви можете помістити будь-які вподобані вам елементи в цей", які були б необхідні для користувацьких елементів / тегів.

Основні спеціальні елементи та атрибути

Спеціальні елементи та атрибути дійсні в HTML за умови, що:

• Назви елементів - малі і починаються з x-
• Імена атрибутів є малі і починаються з data-

Наприклад, <x-foo data-bar="gaz"/>або <br data-bar="gaz"/>.

Загальна умова для елементів є x-foo; x-vendor-featureрекомендується.

Це обробляє більшість випадків, оскільки, мабуть, рідко, що розробнику знадобиться вся сила, яка постачається при реєстрації їх елементів. Синтаксис також належним чином дійсний і стабільний. Більш детальне пояснення наведено нижче.

Розширені спеціальні елементи та атрибути

З 2014 року існує новий, значно вдосконалений спосіб реєстрації користувацьких елементів та атрибутів. Він не працюватиме в старих браузерах, таких як IE 9 або Chrome / Firefox 20. Але він дозволяє використовувати стандартний HTMLElementінтерфейс, запобігати зіткненням, використовувати неімена x-*та неімена data-*, а також визначати користувацьку поведінку та синтаксис для веб-переглядача. . Він вимагає трохи фантазії JavaScript, як це детально описано в посиланнях нижче.

HTML5 Скелі - Визначення нових елементів у HTML
WebComponents.org - Вступ до користувацьких елементів
W3C - Веб-компоненти: Спеціальні елементи

Щодо дійсності основного синтаксису

Використання data-*для імен спеціальних атрибутів було досить дійсним протягом певного часу і навіть працює зі старими версіями HTML.

W3C - HTML5: розширюваність

Що стосується власних (незареєстрованих) імен елементів, W3C настійно рекомендує проти них і вважає їх невідповідними. Але браузери повинні їх підтримувати, і x-*ідентифікатори не будуть конфліктувати з майбутніми специфікаціями HTML, а x-vendor-featureідентифікатори не будуть конфліктувати з іншими розробниками. Спеціальний DTD можна використовувати для обходу будь-яких прискіпливих браузерів.

Ось кілька відповідних уривків з офіційних документів:

"Застосовувані специфікації МОЖУТЬ визначати новий вміст документа (наприклад, елемент foobar) [...]. Якщо синтаксис і семантика даного відповідного документа HTML5 не змінюються за допомогою застосовних специфікацій, то цей документ залишається відповідним HTML5 документ ".

"Користувацькі агенти повинні ставитися до елементів та атрибутів, які вони не розуміють як семантично нейтральні; залишаючи їх у DOM (для DOM-процесорів) та стилізуючи їх відповідно до CSS (для CSS-процесорів), але не випливають із них ніякого значення."

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

"Інтерфейс HTMLUnknownElement повинен використовуватися для елементів HTML, які не визначені цією специфікацією."

W3C - HTML5: Відповідність документів
WhatWG - Стандарт HTML: елементи DOM

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

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

2. Чи буде HTML-документ із спеціальними тегами розбиратися та відображатися стандартним, чітко визначеним способом у веб-переглядачах? Тут, мабуть дивно, відповідь «так». Незважаючи на те, що документ технічно не вважається дійсним HTML5, специфікація HTML5 вказує , що саме браузери повинні робити, коли вони бачать користувальницький тег: коротше кажучи, користувацький тег діє як би <span>- це нічого не означає і нічого не робить за замовчуванням, але він може бути стилізований за допомогою HTML та доступ до нього через JavaScript.

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

Дати оновлену відповідь, що відображає сучасні сторінки.

Спеціальні теги дійсні, якщо вони

1) Вони містять тире

<my-element>

2) Вони вбудовані XML

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

Це передбачає, що ви використовуєте доктрип HTML5 <!doctype html>

Враховуючи ці прості обмеження, тепер має сенс зробити все можливе, щоб ваша розмітка HTML була дійсною (будь ласка, припиніть закривати теги на кшталт <img>і <hr>, це нерозумно і неправильно, якщо ви не використовуєте XHTML-доктіп, який, напевно, не потребує).

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

Цитуючи з розділу Розширення специфікації HTML5 :

Для функцій рівня розмітки, які можуть бути обмежені серіалізацією XML і не потребують підтримки в серіалізації HTML, виробники повинні використовувати механізм простору імен для визначення користувальницьких просторів імен, в яких підтримуються нестандартні елементи та атрибути.

Тож якщо ви використовуєте XML-серіалізацію HTML5, законним для вас є щось подібне:

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

Однак якщо ви використовуєте синтаксис HTML, ви значно обмежені у своїх можливостях.

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

Але ці вказівки в основному спрямовані на постачальників браузерів, які, мабуть, забезпечують візуальну стилізацію та функціональність для будь-яких спеціальних елементів, які вони вирішили створити.

Хоча для автора, хоча це може бути законним способом вставляти на сторінку спеціальний елемент (принаймні, у серіалізацію XML), ви не збираєтеся отримати більше, ніж вузол у DOM. Якщо ви хочете, щоб ваш користувальницький елемент насправді щось робив, або видавався якимось особливим способом, вам слід переглянути специфікацію користувацьких елементів .

Для більш щадного букваря з цього питання прочитайте Вступ до веб-компонентів , який також включає інформацію про 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, яку ви можете побачити тут . Зауважте, що для цього використовується стара версія бібліотеки «Полімер» - більш новітні версії працюють зовсім інакше. Однак, якщо специфікація ще знаходиться в розробці, я б це не рекомендував використовувати у виробничому коді.

просто використовуйте все, що завгодно, без декларації дому

<container>content here</container>

додайте свій власний стиль (display: block), і він працюватиме з будь-яким сучасним браузером

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

1. Це може суперечити чомусь доданому в майбутньому, і
2. Робить документ HTML недійсним, якщо динамічно не доданий через JavaScript.

Я використовую власні теги лише в тих місцях, які Google не цікавлять, для роботи в ігровому механізмі iframe, я зробив <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 та мобільних Safari). Все, що вам потрібно, це лише альфа-символ (az, AZ), щоб запустити тег, а потім ви можете використовувати будь-який із не альфа-символів після. Якщо в CSS, ви повинні використовувати "\" (зворотну косу рису), щоб знайти елемент, такий як потрібен запит \ ^ {...}. Але в JS ви просто називаєте це як бачите. Я сподіваюся, що це допоможе. Дивіться приклад тут

-Мінк CBOS