gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 13:13:14 24 4
gpt4 key购买 nike

我想要我自己的 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

据我所知,如果我显式注册我的自定义元素,我编写的自定义元素似乎不会被 future 同名元素覆盖。这是来自 W3 的引述:

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


我已经包含了一个基于答案的完整页面原型(prototype),但我无法让它将任何 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>

最佳答案

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>

关于html - 如果我为每个标记设置 CSS,我可以使用自己的可选命名空间 HTML 标记吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35934272/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com