Add support for web-components
See original GitHub issueThis is all @michael-klein’s initiative 😄to add support for web-components with a parametrized target for styled
.
@michael-klein feel free to add more details. I’ve created this, to just put it on the roadmap 💯
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
"web components" | Can I use... Support tables for ... - CanIUse
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Read more >Web Components - MDN Web Docs - Mozilla
Web Components is a suite of different technologies allowing you to create ... Add child elements, event listeners, etc., to the shadow DOM ......
Read more >Custom Elements Everywhere
Custom Elements are the lynchpin in the Web Components specifications. They give developers the ability to ... feat: Add native support for custom...
Read more >A Complete Introduction to Web Components in 2022 - Kinsta
Web Components are a standard way to create reusable and modular HTML elements without using a JavaScript framework.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hey there 😃
So, for web-components, a single global style sheet obviously doesn’t work, due to shadow DOM. Therefore, goober would need a mechanism to render to different targets (like the shadowRoot of a web component).
I played with a few ways to implement this and my current favorite is to do it by means of a function binding on styled (which would pass the target to the functions that need it). This change would also incorporate setting the pragma this way and do away with setPragma (htm is the inspiration for this idea).
Basically, users would bind like this to change the target and/or pragam:
I have this change already implemented in a branch and it actually shaves off some bytes from the bundle size. The implementation is mostly in styled.js:
and sheet.js
@michael-klein is there a documentation on how to use this? Specifically using the vanilla
css