When you are using a custom "tag name", that means you wrote an entire brand new element on the top of the HTML/JS. It takes different ways to construct the element, but a main one is: its an empty element at first, you will have to construct everything from scratch, or a "hyper class" with common patterns for you to extend.
When i use the "is" attribute syntax, that means im not creating a new element from scratch with all its complexity. Im really extending an existent HTML component and all its structure, and giving it new super powers.
Thats also the reason i can have so simple elements with rich behaviors and 50 lines of code.
I consider that as a benefit when construct simple components once because i dont have to re-invent the wheel. I use the HTML in favor. (Is something that you have to analyze: there are situations when is better to extend, sometimes is better to create a custom "tag" (element) from scratch. In my opinion, it depends on the complexity of what you're building)".
Another problem is that "The core of how browsers work with HTML continues to be the same as always", and extend an existent HTML component can be a benefit when thinking on that either.
When you inherit from a div, you use a div tag with the is attribute. So in this case Felippe is extending an HTMLDivElement to create his custom element. Hope that helped! This exactly confused me originally as well.
That lead to less code, but also you are more limited. As i said, depends on your needings and what you want to build. Another thing that differs from inherit using is, and write a complete element is the presence of the Shadow DOM. In my case, i dont have a shadow DOM. Web Components can have a "scoped sub-DOM" inside your original DOM. That lead to pros and cons either. See:
The main reason here is that:
When you are using a custom "tag name", that means you wrote an entire brand new element on the top of the HTML/JS. It takes different ways to construct the element, but a main one is: its an empty element at first, you will have to construct everything from scratch, or a "hyper class" with common patterns for you to extend.
When i use the "is" attribute syntax, that means im not creating a new element from scratch with all its complexity. Im really extending an existent HTML component and all its structure, and giving it new super powers.
Thats also the reason i can have so simple elements with rich behaviors and 50 lines of code.
I consider that as a benefit when construct simple components once because i dont have to re-invent the wheel. I use the HTML in favor. (Is something that you have to analyze: there are situations when is better to extend, sometimes is better to create a custom "tag" (element) from scratch. In my opinion, it depends on the complexity of what you're building)".
Another problem is that "The core of how browsers work with HTML continues to be the same as always", and extend an existent HTML component can be a benefit when thinking on that either.
Some reading i consider useful:
What is Web Components
developer.mozilla.org/pt-BR/docs/W...
Web Components and SEO
react-etc.net/entry/web-components...
Built-in Web Elements
hackernoon.com/extending-built-in-...
So it does lead to the writing last code? Less than if you were to create a class that inherits from div?
When you inherit from a
div, you use adivtag with theisattribute. So in this case Felippe is extending anHTMLDivElementto create his custom element. Hope that helped! This exactly confused me originally as well.That lead to less code, but also you are more limited. As i said, depends on your needings and what you want to build. Another thing that differs from inherit using
is, and write a complete element is the presence of the Shadow DOM. In my case, i dont have a shadow DOM. Web Components can have a "scoped sub-DOM" inside your original DOM. That lead to pros and cons either. See:developer.mozilla.org/en-US/docs/W...
In my case i dont have a shadow DOM, the elements are on the same level as all others.