我想要自己的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的引用:
由于元素注册可以随时发生,因此可以创建非自定义元素,在将来注册到适当的定义后,该元素可能成为自定义元素.这些元素称为未定义的潜在自定义元素.如果已经注册了这样的定义,则元素将被升级,成为自定义元素.
我已经包含了基于答案的整页原型,我无法将任何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>
HTML5支持自定义HTML元素,但根据规范,它们应包含一个-字符:
名称必须包含短划线( - ).因此,例如,
<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>你在这里有一个经过充分研究的问题。这样做，您就消除了所有“有效”的解决方案。
你绝对可以按照你所提议的去做，这（无害*）违反了标准。为了面向未来，所有 HTML 标准都允许未知元素，指示浏览器忽略它们（本质上，它们都成为<span>元素），因为没有指示如何处理它们，尽管 CSS 确实会影响它们。这适用于所有浏览器，甚至包括 Mosaic 和原始 IE（尽管 CSS 无法在此类古老的浏览器中工作）。
正如您已经指出的，执行此操作的“正确”方法是定义您自己的文档类型定义(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，或者具有精确版本的现有 DTD），则 HTML 标准的未来版本理论上可能会定义一些不需要的 DTD。您的自定义元素的属性。）
| 归档时间： |
|
| 查看次数： |
164 次 |
| 最近记录： |