这是一个好主意吗？我可以使用命名空间来避免冲突吗？
例：
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标准可以理论上定义一些不需要的属性为您的自定义元素.)
