#webComponents

📢 New! All the Ways to Make a Web Component - November 2021 Edition! 🤯 59 Web Components compared ⌨️ Code styles 📊 Bundle sizes 🏎️ Performance 🤩 All-in-one article! 👉 #thread 🧵👇 #webcomponents #webdev

I once heard if you had to repeat something 3 times you should write an article. So clearly this article is overdue. "Web Components Are Not the Future" by @RyanCarniato #WebDevelopment #webcomponents #DEVCommunity

🆕 🖖 Vue 3.2 brought built-in support for creating Web Components! @vuejs + Web Components = ❤️ Try it now: #vuejs #webcomponents

Re: this I recently needed a bunch of these components for an app, so I put together a quick repo of accessible, easy to use, native web components (no frameworks/libs). So here's generic-components: #webcomponents #a11y #js #vanilla

I still havent seen many good, simple(!), accessible, extensible, zero dep(!) libraries of web components for 'simple' things that are so common like a toggle switch (std switch, anyone?), or accordion, or etc. Theres many novelty components like a 'blink' or whatever.

The #StateOfHTML 2023 results are finally out! Enjoy insights from 22K responses about the state of the web platform, from HTML and interactivity to #webcomponents, PWAs, and a lot more. This project is a monumental effort from people across the world. We even designed novel data collection UIs to gather the data we needed while minimizing friction, which I plan to write a case study about soon.

A UI component we distribute is implemented as a web component. This is proving to be a critical decision. We have a new client on a WooCommerce LAMP stack, and our component works out-of-the-box for them. Web components work everywhere == engineering hours saved! #webcomponents

Once again I’m in the same #webcomponents crossroads I’ve been many times before. My component (an editable <color-swatch> if you need to know) has an <input>. Ideally the input should be styled like other inputs on the page and be able to participate in form submission. Options: 1. Use shadow DOM like I’m supposed to: - Default UA styling. Can manually pull in all stylesheets from all parent roots to adopt the page’s <input> styling. - needs me to replicate the whole HTMLInputElement interface and use ElementInternals for it to work properly w/ form submission. Both tedious AF. 2. Use shadow DOM + a slot, authors can slot in their own <input> for its style to match the page or for form submission. - Now my CSS needs to account for *both* shadow DOM inputs *and* light DOM inputs. - Any styles set on the light DOM version have lower specificity than even a plain input selector. 3. I require authors to BYOE, i.e. slot in their own input at all times. This becomes their opt-in to editability. Tedious DX for authors. 4. We *only* do slotted light DOM input, and if one is not provided, we generate it and add the proper slot attribute to it. Main downside here seems to be theoretical purity, so it may actually be the lesser of four evils. But damn that’s a crappy set of choices. :/

Add the shimmer loading UI effect to your Angular/Ionic/React/Web applications with the stencil-shimmer web component (supports lines/box/circle): cc: @Ionicframework @stenciljs #stenciljs #webcomponents #cssvariables #angular #reactjs #ionic

#webcomponents in space! SpaceX have confirmed the use of Web Components in the Chromium base UI onboard Crew Dragon! They've come a long way since we first started using them on the UI almost 5 years ago now. Checkout the SpaceX reddit AMA:

I can go home proud. We reduce @citiboxES first load size from 282Kb to 49.9Kb (83%). #WebComponents rocks. Tomorrow I will modify the build process to deploy new Citibox's #PWA's. Thanks to @polymer, @webpack and @workboxjs for the tools and libraries.

UPDATE: the catalog now contains over 500 distinct web components! #webcomponents #opensource

🔥 @vuejs Newsletter #39: 🔥@VueConf workshops, how to use Vue with #webcomponents and more! Read: #vuejs @VueJsNews

HTML Imports help you loading HTML files that aggregate dependencies. Learn all about it with @agektmr #webcomponents

TSX where every tag is a real DOM element #dev #typeScript #Webcomponents

Using @stenciljs and @storybookjs to build a content-script @googlechrome extension has changed my life. Type-strong, testable, reusable, JSX #WebComponents that can be injected into any parent page without an app root. Will write a guide.

Another @killedbygoogle 🫤 #webcomponents #material

#webcomponents tip of the day: 🤯 Did you know that when inspecting a component in @FirefoxDevTools, you can click the "custom element" badge to go straight to the element's #javascript source? Yes way! 👩‍🔬 Give it a try next time you're debugging your web app. #html #devtools

Find balance (and a competitive edge) by learning Lightning Web Components OSS in just one hour. ⚖️ @SNUGSFBay #webcomponents #onehour

El futuro del estándar #WebComponents con Polymer 3.0 #PolymerSummit

We're happy to announce our new eslint plugin: eslint-plugin-lit-a11y Accessibility linting for your lit-html templates, right in your IDE! Catch those a11y mistakes early, and ensure a good experience for _all_ users 🎈 #lithtml #webcomponents #a11y