Используя материал типа document.getElementByTagName, вы можете практически создать свои собственные элементы.
<arial>Hello</arial>
И затем в JS..
var a = document.getElementsByTagName("arial");
for(i = 0; i < a.length; ++i)
a[i].style.fontFamily = "Arial"
И у нас есть пользовательский элемент, легкий peasy.
Мой вопрос сводится к тому, что эта плохая практика? Есть ли какой-то недостаток, который я не замечаю?
W3C говорит, что вы не должны. Это плохая практика.
Авторы не должны использовать элементы, атрибуты или значения атрибутов, которые не допускаются настоящей спецификацией или другим применимым так как это делает его значительно сложнее для язык, который будет расширен в будущем.
Кроме того, HTML5 не является XML. Вы должны использовать только элементы, указанные в официальной спецификации.
Основной недостаток этого заключается не в семантическом действии. Тем не менее, браузер будет разбирать его довольно хорошо, как элемент блока, пока вы не добавите к нему больше стиля.
Вместо создания собственных тегов используйте атрибуты class и, возможно, data, чтобы добавить соответствующие атрибуты в DOM.
Как правило, вы хотите использовать стандартные элементы html и использовать их идентификатор или класс, чтобы найти их. Он будет производить гораздо более чистый и полезный код.
Я бы не сказал, что это плохая практика, но она действительно переполняется практически в любой ситуации, и это сделает вашу разметку HTML недействительной в соответствии с W3 Validator. Вместо этого вы можете сделать свой элемент class, а затем обратиться к нему в JavaScript с помощью getElementByClass:
// Grabs the first element with said class
var foo = document.getElementsByClassName()[0];
Как упоминалось в комментариях, создание таких элементов небезопасно. Например, притвориться, что элемент ввода не существует, но был создан позже.
<input>Some Content</input>
Браузеры переписывают это на (XHTML для ясности):
<input />Some Content
Страницы HTML5 содержат элементы, описывающие контент. Это помогает поисковым системам понять вашу страницу. Если они не понимают вашу страницу, это может снизить ваш рейтинг.
Если вы настаиваете на использовании этих тегов и используете их больше, чем блок текста, вы должны дать им ролей и aria-tags. Это помогает поисковым системам и людям, требующим чтения с экрана или других служб доступности.
Некоторые браузеры не позволят стилям CSS вступать в силу до тех пор, пока вы не создадите элемент программно. Это тот же метод, который используется html5shiv для получения старых браузеров для поддержки новых элементов HTML5.
document.createElement("arial"); // don't need to do anything with it
Вы можете использовать атрибуты data-something для элементов тега для замены. Например:
<span data-large>Large Text</span>
Затем вы можете использовать переписывающий, чтобы заменить их другим HTML. В этом примере используется jQuery и чрезвычайно простой язык шаблонов.
rewrites = {
large: '<span style="font-size: 2em">{}</span>'
};
function rewrite(r) {
for (rule in r) {
// build a selector in the form of [data-something]
var selector = "[data-{}]".replace("{}", rule)
$(selector).each(function (i, el) {
// get our inner html and inject it into our template
var inner = $(this).html();
var templated = r[rule].replace("{}", inner);
// replace the element with our new HTML
$(this).replaceWith(templated);
});
}
}
rewrite(rewrites);
Вы можете написать свой код, используя любые теги, которые вам нравятся, но преобразуйте его на сервере, прежде чем он достигнет вашего браузера. Здесь демонстрация, написанная на jQuery (на стороне клиента), но совместимая с Cheerio (nodejs).
rewrites = {
large: '<span style="font-size: 2em">{}</span>'
};
function rewrite($, r) {
for (rule in r) {
$(rule).each(function (i, el) {
var inner = $(this).html();
var templated = r[rule].replace("{}", inner);
$(this).replaceWith(templated);
});
}
}
rewrite($, rules)
Это можно либо обработать в build- script, либо как очень простой серверный шаблон. Таким образом, браузеры и поисковые системы никогда не видят наши составляющие элементы. Я рекомендую это решение, если вам нужны эти виртуальные элементы.