Могу ли я использовать собственные опциональные теги HTML, если я устанавливаю CSS для каждого из них?

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

Это хорошая идея? Могу ли я использовать пространство имен, чтобы избежать конфликтов?

Пример:

HTML:

<b:HGroup>
    <span>item 1</span><span>item 2</span><span>item 3</span>
</b:HGroup>

CSS:

@namespace b "library://ns.example.com/framework/1";

b|HGroup {
   display:inline-block;
   vertical-align: middle;
}

Я прочитал связанный с этим вопрос, и он предлагает DTD. Я бы предпочел не создавать DTD, но если это необходимо, я бы хотел определить его встроенный. Кроме того, я бы хотел, чтобы он запускался как HTML5, а не XHTML.

Примечание:

Я НЕ хочу использовать div плюс a class.

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

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

Я включил полностраничный прототип, основанный на ответах, и я не могу заставить его прикрепить любой CSS к любому элементу с пространством имен. Я включил некоторые JS, которые я нашел на одной из ссылок, но прокомментировал ее часть, которая давала мне ошибки. Моя главная задача - получить элементы с пространствами имен, которые будут созданы CSS с пространствами имен. Из того, как я это понимаю, это должно работать без JS.

<!DOCTYPE html>
<html xmlns:xhtml="http://www.w3.org/1999/xhtml"
  xmlns:s="http://www.w3.org/2002/spark"
  xmlns:space="http://www.w3.org/2002/space"
  xmlns:spaced="http://www.w3.org/2002/spaced">
<head>

<script>
  "use strict";

  const inDocument = document.querySelector("example-element");
  const outOfDocument = document.createElement("example-element");
  // Before the element definition, both are HTMLElement:
  //console.assert(inDocument instanceof HTMLElement);
  //console.assert(outOfDocument instanceof HTMLElement);

  //class ExampleElement extends HTMLElement {};
  //customElements.define("example-element", HTMLElement);

  //class ExampleElement3 extends HTMLElement {}
  //customElements.define("element3", ExampleElement3);

  //document.body.appendChild(outOfDocument);

</script>
<style>

@namespace s url(http://www.w3.org/2000/spark);
@namespace space url(http://www.domain.org/2000/spark-space);
@namespace spaced "http://www.domain.org/2002/spark-spaced";

example-element {
    color: red;
    display:block;
}
element2 {
    color:green;
    font-weight:bold;
}
s|element3 {
    color:yellow;
}
space-element {
    color:yellow;
}
space|space-element {
    display:block;
    color:yellow;
}
spaced|spaced-element {
    display:block;
    color:yellow;
}
</style>
</head>

    <body>
        <example-element>example-element</example-element>
        <element2>element 2</element2>
        <space-element>space element</space-element>
        <s:element3>s namespace element 3</s:element3>
        <space:space-element>space namespace el</space:space-element>
        <spaced:spaced-element>spaced namespace el</spaced:spaced-element>
    </body>

</html>

Ответ 1

У вас есть хорошо изученный вопрос. При этом вы устранили все "правильные" решения.

Вы можете определенно сделать то, что предложили, что (безвредно *) нарушает стандарты. Чтобы быть будущим доказательством, все стандарты HTML допускают неизвестные элементы, инструктируя браузер игнорировать их (по сути, все они становятся <span> элементами), поскольку нет указания, что с ними делать, хотя CSS действительно может повлиять на них. Это будет работать во всех браузерах, даже в Mosaic и в оригинальном IE (хотя CSS не будет работать в таких древних браузерах).

Как вы уже отметили, "правильным" способом сделать это было бы определение вашего собственного Document Type Definition (DTD), которое затем может быть включенным вверху вашего документа HTML с тегом <!DOCTYPE>. Это, вероятно, слишком много, но это технически правильный подход.

Другим решением (которое вы также устранили) было бы использовать <span class="HGroup"> для встроенных элементов и <div class="HGroup"> для элементов блока, поскольку по умолчанию эти элементы фактически ничего не делают.

Вариант этого решения состоит в том, чтобы переопределить действие какого-либо иначе бесполезного тега и отключить его стандартные свойства в CSS, <s> например:

s {
  text-decoration: none; /* remove line-through */
  display: inline-block;
  vertical-align: middle;
}

(* "Ущерб", с которым вы можете столкнуться с именами настраиваемых элементов, заключается в том, что если вы не укажете DTD (ваш собственный, или же существующий с точной версией), будущая версия стандарта HTML может теоретически определите какое-то нежелательное свойство для вашего настраиваемого элемента.)

Ответ 2

Пользовательские HTML-элементы поддерживаются HTML5, но в соответствии с спецификациями они должны содержать символ -:

Имя должно содержать тире (-). Так, например, <x-tags>, <my-element> и <my-awesome-app> - все допустимые имена, а <tabs>и <foo_bar> нет. Это ограничение позволяет синтаксическому анализатору отличать пользовательские элементы от обычных элементов, но также обеспечивает вперед, когда новые теги добавляются в HTML.

Для хорошего введения см. эту статью.

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

custom-element {
    font-weight: bold;
    background-color: #ff0;
}

<custom-element>
    This is a custom HTML element
</custom-element>