Components with the same name as HTML components

[gdcmarinho]

What is the recommendation for components with the same name as HTML components?

I'm creating a UI library and I'm able to create components with the same name as HTML components (example <button>), but can this get me in trouble? By the way, I didn't find any information about it in the official documentation.

[gdcmarinho]

@justinfagnani @aomarks @graynorton

[justinfagnani]

The web components spec allows for "customized built-in elements", but Safari does not and will not support that, so we don't in Lit in order to not encourage elements that would always require a polyfill in Safari.

What you should do in Lit is compose the built-in either in the shadow DOM or light DOM of your element.

[p-ob]

From MDN:

a string representing the name you are giving to the element. Note that custom element names require a dash to be used in them (kebab-case); they can't be single words.

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

So I don't think this is an issue with custom element tag names.

[thescientist13]

No, they can not. As @p-ob shared, per the specification custom element tag names must have a hyphen in the name. All "standard" HTML element tag names are just one word.

edit:

looks like the comment I was replying to was deleted by the OP. here it is for posterity

Huh? That's not my question. I need to know if custom HTML elements can have the same name as standard HTML elements.

It was not directed at @p-ob 😅

[gdcmarinho]

Mmmmmmm... that's curious, @thescientist13. What exactly Material Design from Angular does to have a custom/standard element?

[thescientist13]

Sorry, that link doesn't work for me. It just takes me to the stackblitz home page.

[gdcmarinho]

Uh oh! My bad, here it is:

[thescientist13]

Yeah, like in the case of Angular Material Design, it's just using HTML attributes and CSS attribute selectors, in conjunction with the standard <button>.

Native <button> and <a> elements are always used in order to provide the most straightforward and accessible experience for users. A <button> element should be used whenever some action is performed. An <a> element should be used whenever the user will navigate to another view.

There are several button variants, each applied as an attribute:

You could write this yourself as

button[my-button] {
  background-color: red;
}

<button my-button>Click Me</button>

[gdcmarinho]

The answer is no. Custom elements are not HTML5 default elements, what you can do is increment these standard elements with logic and stylization, but they remained standard elements.