mastodon.xyz is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Mastodon instance, open to everyone, but mainly English and French speaking.

Administered by:

Server stats:

818
active users

#webcomponents

5 posts5 participants0 posts today

What's the best way to provide default styles for a web component?

like: most web components do have `display: inline` but sometimes a display: block; would be better.

I guess my approach would be to never set any styles at all in the JS and say: the defaults are what the user agent gives you. But I did wonder if I can say somehow: "this element is a block element and not an inline element", without having a FOUC (Flash of Unstyled Content). #WebComponents

So…whether you like generative images or not (heck, I’m not sure if I like generative images, especially not this way) we made a thing at my new(-ish) gig: preview.reve.art/ It’s the ways of making images AFTER this first foray that I’m most excited about, but “any sufficiently complex system…”. Check it out as you will and share what you’re able to bring to live?

preview.reve.artReve: Bring your ideas to lifeBring your ideas to life with Reve.Art

Today, I'm excited to release the CEM Validator for your #webcomponents!

This is designed to be an automated check before your components go to production. I know there is a ton of stuff that can be added to this, but I decided to start small. Features include:

✅ package.json validation
✅ module and definition path validation
✅ a check to ensure you are exporting all types for your APIs
✅ a check to make sure the tag name is present for your components

wc-toolkit.com/cem-utilities/c

Web Components ToolkitCustom CEM TypesTypes to make working with custom data in the CEM easier

If you build a custom element and it uses a child element with a CSS shadow part to expose its base styling, e.g. ::part(base), then this will be ignored if the custom element has content-visibility: auto.

So, if you want cards with box-shadow, the shadow styling has to be on the custom element itself, or :host, not the ::part() pseudo selector.