如果我为每个CSS设置CSS,我可以使用我自己的可选的带命名的HTML标签吗？

我想要我自己的 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加一个类.

据我所知,如果我明确地注册我的自定义元素,那么我写的自定义元素看起来不会被同名的未来元素所覆盖.这是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.

我已经根据答案添加了一个完整的页面原型,我无法将其附加到任何带有命名空间的元素上.我已经在其中一个链接中添加了一些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>

解决方法

你在这里有一个很好的研究问题.在这样做时,您已经消除了所有“有效”的解决方案.

你绝对可以做你所建议的,无害的*打破标准.为了达到future proof,所有HTML标准允许使用未知元素,指示浏览器忽略它们(实质上,它们都成为< span>元素),因为没有任何迹象表明如何处理它们,尽管CSS确实会影响它们.这将在所有的浏览器,甚至马赛克和原始的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(您自己的或其他具有确切版本的DTD),则未来版本的HTML标准可以理论上定义一些不需要的属性为您的自定义元素.)

如果我为每个CSS设置CSS,我可以使用我自己的可选的带命名的HTML标签吗？

解决方法

猜你在找的CSS相关文章