I am interested in creating my own HTML tags, but I want to avoid potential conflicts with new tags that may arise in the future. Is it a good idea to use namespaces to prevent such conflicts?
Example:
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;
}
I came across suggestions of using DTD for related issues, however, I prefer not to create a DTD. If absolutely necessary, I would like to define it inline and run it as HTML5 instead of XHTML.
Note:
I want to avoid using div with a class.
Based on what I understand, custom elements I create should not get overwritten by future elements of the same name if I explicitly register them as custom elements. According to the W3C:
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.
I have tried implementing a full page prototype based on the provided answers, but I am unable to style elements with namespaces using CSS. I included some JS code I found from a source, but I had to comment out part of it due to errors. My main concern is getting elements with namespaces styled by CSS without relying on JavaScript.
<!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>