Masthash

#WebComponents

Vincent Tunru
2 days ago

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?

#WebComponents #frontend #webdev #html #javascript

Nicolas Hoizey
5 days ago

🔗 “Building a modern design system in layers” by @dalmaer

#DesignSystem #WebComponents

⚓️ https://nicolas-hoizey.com/links/2023/05/16/building-a-modern-design-system-in-layers/

Screenshot of 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.

GENKI
1 week ago

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.

GENKI
1 week ago

これとか HTMX とか見てると、なんか Riot.js もやり方・使い方によってはこれからもうちょっとどうにかなりそうな気がするんだよな…

プリコンパイルもインブラウザコンパイルもサーバーサイド用のレンダリングモジュールもあるし(SSR は依存ライブラリによってちょっと遅いという issue 経ってたけど、そうあえばそれはいまどうなったかな…)、こういう世界観ってすでに Riot.js のメンテナーさんがもともと目指してる世界に近いというか。いや、そもそも Web 標準の
#WebComponents がもうちょっとこういう課題感を解決してくれたらいいんだけどな… Riot.js はつまるところ WebComponents 手軽に便利に使いたい(けど標準のそれだとちょっと足りない)を叶えるために存在してるみたいなところあるし。

#webdev #riotjs #javascript

https://github.com/josephernest/Swap

wesruv
2 weeks ago

To all those button, cta, and layout #webcomponents. I made you a meme.

#JS that can be replaced with #CSS needs to meet some Bobs.

Nervous Office Space character meeting the Bobs who said "I take the specs to the engineers, I'm a people person!"

Text over image:
Way too many Web Components
I take the CSS to the content, don't you understand?
Axel Rauschmayer
2 weeks ago

#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?

Reuben Walker
2 weeks ago

In Chris' Corner, Mr. Coyier looks at Web Components. https://codepen.io/spark/338 #WebComponents

Reuben Walker
2 weeks ago

In Chris' Corner, Mr. Coyier looks at Web Components. https://codepen.io/spark/338 #WebComponents

Nicolas Hoizey
2 weeks ago

🔗 “Building a modern design system in layers” by @dalmaer

#DesignSystem #WebComponents

⚓️ https://nicolas-hoizey.com/links/2023/05/16/building-a-modern-design-system-in-layers/

Screenshot of Building a modern design system in layers
The Spicy Web
2 weeks ago

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

#WebComponents #HTML

adamghill
2 weeks ago

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/. 🤩

#javascript #html #webcomponents

Cole Peters
2 weeks ago

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

#webdev #html #css #webcomponents

thomas 🌸
3 weeks ago

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

Ian K Tindale
3 weeks ago

@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

#HTML #NoJavaScript #Link #Include #WebComponents

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

Brian LeRoux 💚
3 weeks ago

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?

#webdev #webstandards #webcomponents

Brian LeRoux 💚
3 weeks ago

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.

#webdev #webstandards #webcomponents

Brian LeRoux 💚
3 weeks ago

🌶️🥵 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.

#webDev #customElements

thomas 🌸
4 weeks ago

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

Danny Blue
1 month ago

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

Html code showing two elements nested inside of an element called local-storage-ctx

🕸️ 📦
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?

#webcomponents
#state
#reactive
#javascript

Egor Kloos
1 month ago

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/

Nick Taylor
1 month ago

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**

kapilkaisare
1 month ago

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

#webcomponents
#webdev
#javascript
#typescript

Noah Liebman
1 month ago

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.

#WebDevelopment #WebComponents

Egor Kloos
1 month ago

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`

/* Overrides @scope rule */
[slot="intro"] {
 	font-weight: 100; 
}
@layer components {
	@scope (article-component) {
		/* Yes, this works! */
		:scope:has(:not(:defined)) {
			visibility: hidden;
		}
		:scope::part(title) {
			color: dodgerblue; 
		}
		[slot="intro"] {
			font-weight: 700;
		}
	}
}
Egor Kloos
1 month ago

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.

#stencil
#webcomponents
#webdev

Stuart Jones
1 month ago

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.

#Accessibility #a11y #HTML #CSS #WebComponents

The Spicy Web
1 month ago

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

"That's what the money is for!" Mad Men GIF
Tane Piper
1 month ago

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

#webComponents #webDev #html #ReactiveForms #opensource