Anybody using Web Components? Why? Any examples?

JavaScript
1

For years I have seen the word “web components” without any clue how to use them or how they work. Finally I found something to test if I can benefits of them.

My goal was to simplify the icons and hovering tooltip in simplest possible way and reuse and reduce code. The code was shortened to this single line:

<wcomp-icn name="icn_back" tip="Back"></wcomp-icn>

And the code is here. Can it be further simplified?

I am now searching for ideas to implement web components in other areas. As I have not found any good example how to use them in real life. Do you have any good web component code that you can share?

TIA

2

A Component (preferably) should be a Component with minimal dependencies,
just like your left rear wheel is not dependent on your gas pedal.

Ditch the inline SVG, ditch all Symbols, all can be created by the Web Component itself.
Ditch the CSS, put all (related) CSS inside the Web Component
Use shadowDOM so NONE of your global styles can (accidently) style your SVG icons.
Use shadowDOM so your contained CSS can NOT style anything else in the page.
Only abuse default attributes (“name”) when thats really what you want do.
“is” is a default attribute, but since Apple doesnt support that part of the standard you can savely abuse it, since it will never be used by the WHATWG in the future.
Handle clicks INSIDE the Component (your gas pedal does not control your windscreen wipers)
Optimize the SVG (viewBox*10 and no precision) Now positioning is done with first M value
See: https://svg-viewbox.github.io/
Write good Web Component Names, “wcmp-icn” is cryptic “svg-icon” says what it does, you don’t call it “car-motn-lvr”

Refactored: https://jsfiddle.net/WebComponents/amdLcqzn/

Plenty of Web Components on my DEV.to pages URL: dev.to/dannyengelman (I am not allowed to post more than 2 links here)

1 Like
3

Wow! This was a lot to take in. I have to implement this by baby steps. Thanks!

I wonder how a web component with 100 svg icons would look…

4

How does one inlined SVG file with 100 Symbols look ???

I can say it will look 50 times larger than a Web Component with 2 icons.
All your content will be in one file.
And the GZip size will definitly be smaller than anything with <symbol>