#PatternFly Elements 2.4.0, the #WebComponents library, is out with a bunch of new elements, including a preview of `<pf-table>`:

https://github.com/patternfly/patternfly-elements/releases/tag/%40patternfly%2Felements%402.4.0

Do #WebComponents break "SEO"?

https://dev.to/stuffbreaker/seo-and-web-components-2023-edition-3l6i

Unsuspecting #react users may come to believe that #WebComponents break react, but the truth is - as usual - exactly the opposite. Despite the superficial similarity to #HTML, react's JSX language breaks the web platform's powerful native slot element. (https://bennypowers.dev/posts/another-way-react-breaks-html/)

@techytacos wrote this lovely #tutorial on using #lit #webComponents with #redux stores

https://lit.dev/playground/#gist=b7e3c1e58657a3b130521f17b1a15af2

Like #11ty? Like #WebComponents? Like making the latter with the former? Have I got a quick band-aid of a #hack for you!

https://bennypowers.dev/posts/webc-dsd-slot-workaround/

After almost a year of discussions, Apple confirms what we already knew: there will be no customized built-ins

https://github.com/WebKit/standards-positions/issues/97#issuecomment-1645167814

#HTML #WebComponents #specification #DOM #WHATWG

@paulhmason Here we go - a <web-sarcasam> #webComponent:

https://stackblitz.com/edit/sarcasam-and-satire?file=index.html

#webComponents #webDev

Enjoy my talk on #PatternFly Elements #WebComponents @devconf_cz

https://www.youtube.com/watch?v=_igS-VWZ5-Y

On Sunday morning, join me at @devconf_cz for a presentation on building performant #DesignSystems with #WebComponents

https://devconfcz2023.sched.com/event/1MYdJ/patternfly-elements-a-performant-design-system

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

#eli5 (explain to me like I'm 5-years-old) what #WebComponents are and how they're different from #javascript-heavy #frameworks (https://bennypowers.dev/posts/eli5-web-components/)

I wrote about my first impression of the new #WebC framework for #11ty and other #staticSiteGenerators

Learn about the advantages of WebC, and consider some of the questions that came up for me while learning to use it for the first time. Are webc and #webComponents the same thing? If not, how do they differ? When would you use WebC? When might you not?

Read about it on my #eleventy-powered, webc-authored site:

https://bennypowers.dev/posts/webc-impressions/

Yesterday, I realized that one major downside to custom built-in components is that they are not polymorphic. For example, if I were making a web component that implemented the switch pattern, I’d have to make one for using with a button and another one for a checkbox. #WebComponents

Today I learned you can’t use `attachInternals()` with customized built-in elements. #WebComponents

Potentially terrible #WebComponents idea: slot a template for a component to use as a structure inside of the component.

It would be nice to make my own `HTMLCollection`s for #WebComponents.

Potentially terrible #WebComponents idea: nesting the unnamed slot inside of a named slot.

(Declarative Shadow DOM used for illustration)
```html
<my-element>
<template shadowrootmode="open">
<slot name="with-button"><button part=“button”><slot>I am a button</slot></button></slot>
</template>
<button slot="with-button">I am a slotted button</button>
</my-element>
```

#Shoelace #WebComponents 2.0 is out! https://github.com/shoelace-style/shoelace/releases/tag/v2.0.0

I haven’t dug into any specs so I’m not entirely sure what the expected behaviour should be, but setting the `@keyframes` in the outer context seems to be the quickest solution to get them working for `::slotted()`. This is problematic though because #WebComponents shouldn’t create side effects like that, since that could override `@keyframes` set by the document author.

[2/n]

There is inconsistency between browsers with `@keyframes` in the Shadow DOM. I’m trying to figure out a non-harmful way of reconciling it until it gets sorted out.

In Chrome and Firefox, `::slotted()` cannot use `@keyframes` defined inside of the shadow tree, but it can them defined outside of the shadow tree.

In Safari, `::slotted()` can use `@keyframes` defined inside of the shadow tree, but cannot use them defined outside of the shadow tree.

[1/n]

#WebComponents