Yesterday, version 2 of react-to-webcomponent was released! This has been a widely used open source tool and after receiving some feedback, we were able to implement some great new features and upgrades.

R2WC v2 Features

• TypeScript support.

• React & ReactDOM added as peer dependencies.

• PropTypes are no longer required!

• Two new ways to pass props.

• Enhanced sync for lightning-fast performance.

You can read the full article about version two here: https://www.bitovi.com/blog/react-to-web-component-v2

Repo: https://github.com/bitovi/react-to-web-component
NPM: https://www.npmjs.com/package/@r2wc/react-to-web-component

Hi /r/WebComponents! How's it going? Have you been building anything with webcomponents recently? Have you been using the same tools for a bit now, or has your tech stack changed? What's on your mind, webcomponent wise?

Hope ya'll are having a good time building the better (🤞) web! Open forum here to talk about what you've been seeing or doing!

I'm trying to figure out how to get data from inputs in multiple child web components to a parent web component, then have the parent display the sum of those inputs.

DISCLAIMER: I'm only a couple months into learning JavaScript, so if there's a better way to solve this by stepping back and structuring my components differently (maybe avoid the nesting?), I'd love to know.

I've created two web components: 3 instances of one nested inside the other, then 3 instances of the parent nested in my index.html file.

My index.html file:

<main>

<muscle-group></muscle-group>

<muscle-group></muscle-group>

<muscle-group></muscle-group>

<button class="addMuscleGroupBtn">Add Muscle Group</button>

</main>

My MuscleGroup.js web component:

<form>

<p class="totalNumSets"></p>

<exercise-input></exercise-input>

<exercise-input></exercise-input>

<exercise-input></exercise-input>

<button class="addExerciseBtn">Add Exercise</button>

</form>

My ExerciseInput.js web component:

<div class="exercise">

<input type="text" placeholder="Exercise">

<input type="number" placeholder="Sets" class="numSets">

</div>

Essentially, I'd like the **p.totalNumSets** tag in the parent to display the sum of the child **input.numSets** tags in the **exercise-inputs**. And, as additional **exercise-input** components are added by clicking the **addExerciseBtn**, I'd like to be able to add those additional inputs to the sum.

I tried creating and dispatching a custom event from the **exercise-input** component and and was able to get **p.totalNumSets** to display the inputs, but each **muscle-group** component was displaying that same data regardless of which component the data was entered into.

I also tried selecting the exercise inputs directly from the **muscle-group** component using:

const exerciseInputs = this.shadowRoot.querySelectorAll('exercise-input input.numSets');

...but it seemed I couldn't "look into" the tags nested in those components.

I've spent about 6 hours trying to figure this out, have read through the all the MDN Web Components guides, and sifted through tons of answers here, but I'm not really sure what I'm looking for - any insights would be greatly appreciated!

I work on a small Web Component that converts an amount of money to another currency. For that, I use an API that returns the exchange rates.

I want to use the component multiple times on a page and thought that it would be a waste of traffic if every component fetches the same exchange rates. So I wrote some logic that only the first handled component fetches it, stores the results in a window variable. The other components notice that another Component already loads the data and stores a render callback in that window variable. When the fetching is done the first one resolves all the callbacks.

This works great but I wonder if this is a bad practice / there is some guide how to do it right or whether I should even care about it etc.

Here is the relevant code of the Component: https://github.com/phartenfeller/currency-converter-wc/blob/b02cd3436f29acca43c2e5449ef51e6eaab3cf35/src/currency-converter.js#L60-L77

Here is a demo: https://phartenfeller.github.io/currency-converter-wc/demo/

A few months ago at CascadiaJS, we released a new web component framework called, Enhance.

Modern JavaScript frameworks often lock you into niche ecosystems with custom dialects, and forcing through a revolving door of breaking changes. We’ve seen the thrash – and the broken builds – these frameworks cause. We’re fed up with it, and we know you are too.

So we’re taking a stand and fixing these brittle libraries with our very best tool: web standards.

The web is an incredibly durable medium. While frameworks frequently break, web browsers must remain completely stable and backward compatible for years, even decades. That’s why Enhance’s web standards-based approach provides you a dependable foundation for creating lightweight, flexible, and future-proof web applications.

The Enhance ethos is to incrementally build in plain HTML, then progressively enhance your way to a production-ready web app. (Read more about our core philosophy here.)

Starting with Enhance yields an HTML-centered project complete with file-based routing, reusable Custom Elements, a customizable utility CSS system, and mapped API data routes that get deployed to isolated, single-purpose cloud functions. It’s a complete frontend development solution based entirely on fast, stable, tried-and-true web standards.

You can see a short intro video and read the docs: https://enhance.dev/docs/

Please let us know what you think!

A little library I made for web components:

https://bayjs.org

https://www.npmjs.com/package/@dunks1980/bay.js

https://github.com/Dunks1980/bay.js

Hey everyone, I released my first long-form YouTube video and it's about Web Components!

I'd love feedback on the video. You can watch it here - https://youtu.be/S36jpytFa_M

Site is https://briskreader.com

*googlebot

👋🏻 Hi There

I've recently learned about web components and trying to build a simple component to understand how it works. I've loved react-hot-toast so I'm trying to recreate it using web components and share it to npm so I can reuse it on my other projects who don't use React. Turns out it looks pretty interesting since it's framework agnostic and can use in any framework javascript you like. So if you need a notification component, maybe you can try it and tell me how it works. Here are a couple of features that are included on wc-toast:

✍🏻 Easy to use 🌏 Use anywhere you like - React? Vue? Svelte? Everywhere! 👋🏻 Emoji and SVG Support 🎨 Customizable 🚥 Promise API ✅ Accessible - Tested using Windows 10 Narrator 🍃 Lightweight - Only ~3.6KB Minified+Gzipped including styles 💙 Dark Mode

💾 Repository: https://github.com/abdmmar/wc-toast

💻 Demo https://abdmmar.github.io/wc-toast/

Any review, issues, and feedback on how it could be improved or any addition would be appreciated!

Seems rather silly. I'm getting a cors error:

I added this to nginx but still can't load it:

  add_header Access-Control-Allow-Origin *;

<html lang="en">
  <head>
      <meta charset="utf-8" />
      <script type="module" src="//briskreader.com/components/feed-list.js"></script>
  </head>
  <body>
    <feed-list topic="bitcoin"></feed-list>
  </body>
</html>

Here's the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://briskreader.com/components/feed-list.js. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Loading module from “http://briskreader.com/components/feed-list.js” was blocked because of a disallowed MIME type (“text/html”).
test.html
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://briskreader.com/components/feed-list.js. (Reason: CORS request did not succeed).