😎 Two cool post on #webcomponents over on FrontendMasters:

#1 "How I Write Custom Elements with lit-html" by Dave Samaniego

How I write components but also explains a non-obvious superpower✨ of lit-html's atomic partial rendering system.

https://frontendmasters.com/blog/custom-elements-with-lit-html/

#2 "The Missing Link for Web Components" by Florian Geierstanger.

Like a post I wrote but wonderfully more technical on the superpowers✨ of the Custom Elements Manifest.

https://frontendmasters.com/blog/the-missing-link-for-web-components/

When you are in an #html file, and you want to go-to-definition for a custom element, what do you think the behavior should be? Should it go to:

- type definition
- JS file where the class is defined
- CEM entry
- something else

#webcomponents #javascript

@sir_pepe Yes. I usually build my #webcomponents so they never access the DOM in the constructor. The connected callback is usually the right place to do this stuff.

☝️ PSA: Accessing this.children in web components (be that in the constructor or the connectedCallback) may get you different results depending on the HTML structure. Tunneling everything through <slot> and reacting to slotchange events (or setting up a MutationObserver if you are particularly depraved) is annoying, but not as much of a footgun.

#javascript #webdev #webcomponents

This post originally appeared on The Fulcrum.

Welcome to this week’s The Programmer’s Fulcrum.

It’s your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of weakening […]

Reference Target: и волки сыты, и инкапсуляция цела. Элис Боксхолл представляет новое предложение, которое позволяет элементам в shadow DOM становиться целями, когда ссылаются на хоста, при этом сохраняя инкапсуляцию. В спецификациях есть пул-реквесты, а в браузерах реализации: в Chromium самая полная за флагом, а в WebKit и Firefox ранние прототипы. #webcomponents #a11y

https://blogs.igalia.com/alice/reference-target-having-your-encapsulation-and-eating-it-too/

Reference Target: having your encapsulation and eating it too. @sundress introduces the new proposal that lets elements in shadow DOM become targets when a shadow host is referenced, while keeping encapsulation. There are open specs PRs and experimental implementations: Chromium’s one is the most complete, and WebKit and Firefox have early prototypes. #webcomponents #a11y

https://blogs.igalia.com/alice/reference-target-having-your-encapsulation-and-eating-it-too/

Platform-provided Behavior Mixins you say?!? 😲

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedMixins/explainer.md

What do you think? 👂

#webDev #webComponents #webComponentsCG #developingDesignSystems #w3c

The combination of Custom Element Slots, the Popover API, and CSS Anchor Positioning enables complex navigation menus, with the browser doing most of the lifting.

#css #webcomponents

https://codepen.io/dutchcelt/project/editor/AMGWnp

Learn TEI Publisher - Session 2 of 3

https://friprogramvarusyndikatet.tv/w/63eRmyvmh48kcn4reJSqNt

Okay #frontend folks:

I wrote UIs before React. I leaned into React hard early on, because it matched my mental model for UIs. I don't want to do React anymore.

**In your opinion what's the next best direction for building UIs?**

My goal is to simplify the process of writing and managing accessible interactive components with as little overhead as possible.

Boosts and wildly unpopular opinions welcome.

#react #vue #preact #webcomponents #svelte

RE: https://fosstodon.org/@mainmatter/116017415891955006

We’re seeing more and more teams adopt multi-framework architectures with #emberjs, #react, #svelte, #vuejs, or #webcomponents mixed together in one big system. @nickschot wrote about some learnings from a recent project in which @mainmatter helped a client integrate Ember.js and React.

Performance-Optimized Video Embeds with Zero JavaScript

https://fed.brid.gy/r/https://frontendmasters.com/blog/performance-optimized-video-embeds-with-zero-javascript/

Как динамически устанавливать кастомные элементы. Хейдон Пикеринг предлагает соглашение об именах, хелперы define() и скрипт install(), который ищет :not(:defined), убирает дубликаты и импортирует только реально используемые элементы. Для зависимых компонентов есть событие ready, а для добавлений после загрузки подходит MutationObserver. #js #webcomponents

https://heydonworks.com/article/dynamically-loading-custom-elements/

How to dynamically install custom elements. @heydon shows a naming convention, a tiny define() helper, and an install() script that scans :not(:defined), dedupes matches, and dynamically imports only what is used. For dependent components, it can fire a ready event or use a MutationObserver for elements added later. #js #webcomponents

https://heydonworks.com/article/dynamically-loading-custom-elements/

The Missing Link for Web Components, by @kinoauge (@frontendmasters.com):

https://frontendmasters.com/blog/the-missing-link-for-web-components/

#webcomponents #typescript #json #mcp #ai #tooling

#Development #Approaches
Anti-frameworkism · When to choose native web APIs over frameworks https://ilo.im/169luf

_____
#JavaScript #Frameworks #React #AI #WebComponents #SSR #APIs #Browsers #WebDev #Frontend

I've been having fun with improving this FOUC solution for #WebComponents. Thank you, everyone, for the feedback!

I've improved upon it.

That resonates with me #fosdem #webcomponents

I built a data grid with web components – here's what I learned. #webComponents

https://dev.to/oysteinamundsen/i-built-a-data-grid-with-web-components-heres-what-i-learned-5bfc?utm_source=flipboard&utm_medium=activitypub

Posted into THE FULCRUM: CODING FOR DEMOCRACY AND THE OMN @the-fulcrum-coding-for-democracy-and-the-omn-mobileatom