#WebComponents
Question for the @frontend community:
What benefits would you say Web Components have over a framework's components, *besides* not being tied to a framework?
🔗 “Building a modern design system in layers” by @dalmaer
⚓️ https://nicolas-hoizey.com/links/2023/05/16/building-a-modern-design-system-in-layers/
GeoServer v2.23.1 released including improved MapML viewer v0.11.0 with lots of new features. #MapML #WebComponents #GeoServer
Kudos to the GeoServer team and community for such a useful and consistent product.
https://geoserver.org/announcements/2023/05/23/geoserver-2-23-1-released.html
But #WebComponents are #JavaScript which they would need to load *somehow*. Assuming we could get them to bundle it they'd still be giving our script free reign to manipulate the page anyway we see fit. We currently rely on some hacks to achieve #CSS isolation without #shadowDOM but other than that I'm not certain a #web #component would improve anything.
I wish if web standard #WebComponents could solve these issues... but it's not, so Riot.js exists to fulfill the need for easy and convenient use of WebComponents the standard is a bit lacking).
I guess Riot.js is a webcomponent that is there to make things easier and more convenient to use.
これとか HTMX とか見てると、なんか Riot.js もやり方・使い方によってはこれからもうちょっとどうにかなりそうな気がするんだよな…
プリコンパイルもインブラウザコンパイルもサーバーサイド用のレンダリングモジュールもあるし（SSR は依存ライブラリによってちょっと遅いという issue 経ってたけど、そうあえばそれはいまどうなったかな…）、こういう世界観ってすでに Riot.js のメンテナーさんがもともと目指してる世界に近いというか。いや、そもそも Web 標準の
#WebComponents がもうちょっとこういう課題感を解決してくれたらいいんだけどな… Riot.js はつまるところ WebComponents 手軽に便利に使いたい（けど標準のそれだとちょっと足りない）を叶えるために存在してるみたいなところあるし。
To all those button, cta, and layout #webcomponents. I made you a meme.
#WebComponents: My knowledge of them is limited, but the cross-platform story looks relatively good now: https://caniuse.com/?search=web%20components
One important piece is declarative shadow DOM. It enables better server-side rendering and UIs that work without JavaScript. It’s now supported by Chrome and Safari, but not by Firefox.
What is still missing? I remember reading that accessibility was an issue in some cases. Is that still true?
In Chris' Corner, Mr. Coyier looks at Web Components. https://codepen.io/spark/338 #WebComponents
In Chris' Corner, Mr. Coyier looks at Web Components. https://codepen.io/spark/338 #WebComponents
🔗 “Building a modern design system in layers” by @dalmaer
⚓️ https://nicolas-hoizey.com/links/2023/05/16/building-a-modern-design-system-in-layers/
This is cool…down the road if you need to get the tag name of a defined custom element, you'll be able to use customElements.getName. For example:
```js
customElements.getName(MyGroovyElement)
// would return my-groovy-element
```
It's landed in Safari TP, other browsers to follow. See:
https://github.com/whatwg/html/pull/9195
https://18alan.space/posts/how-hard-is-it-to-build-a-frontend-framework.html has been trending on the homepage of HN all day and the comments surfaced a bunch of new libraries to add to https://unsuckjs.com/. 🤩
Just in time for the weekend, very excited to announce the arrival of Enhance Styles 5.0, a major upgrade to the configurable styling library built into every @enhance_dev project.
Full details in the announcement blog post, but I'll be sharing some highlights here as well 🧵
https://begin.com/blog/posts/2023-05-12-introduce-enhance-styles-5
Tinkering today with a server where you write TSX / JSX and get a single endpoint that can serve just the plain HTML in different ways. For example you can do .htmlwc or .js and get the web component in either HTML format or JS format. Lots of interesting ideas here. #deno #htmx #html #server #webdev #overthewire #webcomponent #webcomponents
https://gist.github.com/reggi/2a49b47d367a31ceb37280f11579825c
@neil really though, I want two things (well don’t we all)
1 – web components (template, slot, etc) should work fully without the help of JavaScript, HTML should offer all the capabilities required to make web components work as is (seriously, any JavaScript is going to be pretty much the same each time, just give HTML the balls to do it itself)
B] in the meantime, make the able to do exactly the job of an include – let me specify a path to a valid well-formed chunk of stuff, let me tell it that it’s to be an include, and then the chunk of stuff appears exactly as if it was actually typed in at that spot in the markup
WebComponents are awesome!! I just wish they had a mechanism for simple SSR as part of the spec. I mean, there is experimental support for SSR, but the way the spec doesn't define how you should go about creating the HTML. Also, afaik, theres no special lifecycle hook for components that are connected with SSR'd HTML. #webdev #webcomponents
Why do people think progressive enhancement (PE) equals "no JavaScript"?
Genuinely asking. Every time I bring up PE ppl interpret it as saying "zero client JS" which is not PE. Progressive enhancement is additive client JS rather than exclusively JS?
We need more web components enthusiasm for progressive enhancement.
Making everything require client JS ain't it. Note: I'm not saying no client JS. I'm saying mae it work well without and use client JS to make your app better.
That includes SD for the time being.
🌶️🥵 shadowdom is awesome but has many tradeoffs that put it in YAGNI territory and should only be a last resort not a default
(lightdom works great ! it got us here) #webcomponents #webstandards #webdev
I keep thinking that #WebComponents are the real solution; they provide CSS isolation with #shadowDOM, and would allow third parties to integrate by simply adding <html-elements>.
Trouble is; any #JS you import runs with full privileges on your user's browsers. What's really needed is a sandbox.
I think it may be a job for #Google's #AMP, but that is so poisoned it'll be a hard sell.
I'm bothered that https://www.webcomponents.org/publish uses NPM packages as the main way to publish a web component. I want a better web-component "package manager", something that's simple, uses module imports, can use Tailwind and TypeScript, and just plops out a URL like Deno packages do. It would support LIT and webc. I'd want a storybook-like UI and sample code. #webcomponent #webcomponents #webdev #javascript #js #software #frontend #css #html
Custom elements give your server the opportunity to describe javascript behavior via HTML. It sounds silly but it is really cool. #webcomponents #JavaScript #html https://github.com/joist-framework/joist/tree/main/packages/di#context
@nosherwan keep state out of components, use attrs instead
I'd take a pay cut to work with #webComponents
🕸️ 📦
Reactive state in Native Web Components:
Anyone not using Lit framework, how do you manage reactive state inside native web components?
I am learning about Astro & Web Components.
I have seen examples where javascript proxy objects can be used to updated reactive state in a native web component.
Are there any elegant solutions being used by anyone in this area?
An excellent rebuilding exercise by @shadeed9. Three things stand out. How little custom properties are used. No fluid layout or sizing using clamp and as I use #WebComponents its odd to see class names everywhere. 😅 https://ishadeed.com/article/rebuild-featured-news-modern-css/
It was a tonne of fun hanging with @mhartington this week learning all about **Ionic**. Thanks for hanging Mike!
https://www.youtube.com/watch?v=-QngQ5qu1Yw
**#ionicframework** **#webdevelopment** **#mobileapp** **#webcomponents**
w00t! #Stencil enters the Thoughtworks Tech Radar in trial! About time too! #WebComponents
https://www.thoughtworks.com/radar/languages-and-frameworks?blipid=202304104
🌐
Why you should Invest in
Web Components:
A very well written article, that argues why it is the best time to invest in Web Components rather than anyone else's flavor of the month Front End Framework.
https://blog.bitsrc.io/web-components-are-dead-long-live-web-components-1de76ab4890d
How do y’all think about a component having an intrinsic size vs having its container layout determine its size?
For example, should a toolbar set its own height, or should a page’s grid layout manage the toolbar’s height?
#ux #frontend #CSS #WebComponents
I think I kind of see what’s cool about Web Components, but it’s like, also trying to solve a “big picture” problem that I don’t really have. 🥴
Like, yeah it hides all the differences between all these frameworks, but you still have to learn yet another framework to use it. 🥴
Then you have to learn/relearn these standardized components and still have to stress about customizing or extending them.
Playing with #CSS scope and #webcomponents in Chrome with the experimental feature turned on. Still, some behaviour that I'm not sure is correct.
A scope placed in a CSS layer can still be overridden by a simple rule placed outside the layer. And you can place `::part` inside a scope but need to prefix it like this `:scope::part(title){ ... }`.
Also, proximity takes a bit of getting used to but still very cool.
Updated the 'part' about `::parts`
Interesting to find that developers do care about performance when discussing #webcomponents. In the end, it does matter what and how you measure.
https://dutchcelt.nl/posts/web-components-and-three-questions/
@tanepiper @daanderson just noticed Stencil that is also a web component library, has some interesting contributors.
Two of the top contributors are actually from the qwikdev team.
Adam & Manu.
Also the fact that it is hosted under ionic-team on github.
Hey there Accessibility Fedizens
I'm looking to consume good podcasts that talk about accessible HTML and CSS development. Bonus would be if they also cover Web Components.
Appreciate any recommendations.
Literally any JavaScript code you ship to the browser which is responsible for "wire up these tags to these functions/objects" is wasted bandwidth & energy because **that's what the #WebComponents are for!**
Web Component = #HTML element you get to write yourself. It's pretty awesome. #WebDev
I've officially released my first #webComponent on #npm - Formula - https://www.npmjs.com/package/@webhelpers/formula
It works with any static HTML5 form and turns into a Reactive Form, all you need to do is wrap the form in `<formula-form>` and it starts working - Demo here https://stackblitz.com/edit/vitejs-vite-skkuff?file=index.html