Реализация пространства имен пользовательских тегов в HTML5

Question

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

<fp:player data-type="mp3" data-href="/path/to/file.mp3" />

Каков наилучший способ реализации этого пользовательского тега, и он должен быть действительным в максимально возможном количестве браузеров?

Answer 1

Приведенная выше спецификация также ,

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

Опубликованная цитата Квентина, если я правильно понимаю спецификацию, относится к расширениям пользовательского агента. (Под этим я предполагаю, что они подразумевают как специальные браузеры, так и плагины браузеров.) User-agent не должен создавать новые теги или атрибуты. Веб-разработчик может использовать любые готовые теги и атрибуты, которые им нравятся. И спецификация явно инструктирует разработчиков пользовательских агентов учитывать неизвестные теги и атрибуты и включать их в DOM и при визуализации страницы.

Доступ к ним с помощью скрипта становится немного сложнее. IE 7 и 8 для вас, чтобы добавить пространство имен для поиска этих пользовательских тегов, что делает ваш документ технически недействительным - , но все еще полностью функциональным!

Смотрите здесь (мой блог): http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html

Answer 2

С спецификация HTML :

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

Так что вы не можете создать его и соответствовать спецификации, а Facebook и Google очень, очень непослушные.

Вы, похоже, пытаетесь заново изобрести элемент <audio> .Так что просто используйте это, и проблема расширения языка исчезнет.

Answer 3

посмотрите, как html5shim или html5shiv создают новые элементы: https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js

по сути, вам просто нужно document.createElement () элемент, затем вы можете использовать его.