如果我为每个标记设置 CSS，我可以使用自己的可选命名空间 HTML 标记吗？

Question

我想要我自己的 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 加上 class。

据我了解，如果我明确注册我的自定义元素，我编写的自定义元素似乎不会被未来同名元素覆盖。这是引自 W3:

Because element registration can occur at any time, a non-custom element could be created that might in the future become a custom element after an appropriate definition is registered. Such elements are called undefined potentially-custom elements. If such a definition is ever registered, the element will be upgraded, becoming a custom element.

我已经包含了一个基于答案的完整页面原型，但我无法让它将任何 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.example.com/2000/spark-space);
@namespace spaced "http://www.example.com/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>

Answer 1

您在这里有一个经过深入研究的问题。这样一来，您就消除了所有 "valid" 解。

你绝对可以按照你提出的建议去做，这（无害*）违反了标准。要成为 future proof，所有 HTML 标准都允许未知元素，指示浏览器忽略它们（本质上，它们都变成 <span> 元素），因为没有指示如何处理它们，虽然CSS 确实可以影响他们。这将适用于 ALL 浏览器，甚至 Mosaic 和原始 IE（尽管 CSS 不适用于此类古老的浏览器）。

正如您已经指出的那样，"proper" 方法是定义您自己的 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;
}

(* 您可以运行使用自定义元素名称的 "harm" 是，如果您不指定 DTD（您自己的 DTD 或具有确切版本的现有 DTD），则HTML 标准的未来版本理论上可以为您的自定义元素定义一些不需要的属性。）

Answer 2

HTML5 支持自定义 HTML 元素，但根据 the specs 它们应该包含 - 字符：

The name must contain a dash (-). So for example, <x-tags>, <my-element>, and <my-awesome-app> are all valid names, while <tabs> and <foo_bar> are not. This restriction allows the parser to distinguish custom elements from regular elements but also ensures forward compatibility when new tags are added to HTML.

有关详细介绍，请参阅 this article。

将 CSS 应用于自定义 HTML 元素与将 CSS 应用于标准 HTML 元素的方式相同：

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

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

如果我为每个标记设置 CSS，我可以使用自己的可选命名空间 HTML 标记吗？

Can I use my own optionally namespaced HTML tags if I'm setting the CSS for each one?

html

css

custom-element

htmlelements

示例：

注：