React Web Component Style Loader

Adds CSS to web components created by react-web-component by injecting a <style> tag to the web component

• What is it, how does it work and when to use it
• Installation
• Basic Usage with react-web-component
• Maintainers

What is it, how does it work and when to use it

react-web-component-style-loader is a companion to react-web-component. When creating a web component we face the issue that we need to attach all styles to the shadow dom of the component rather than somewhere on the page while still being able to use state of the art tooling (webpack) and write modular CSS across multiple files.

This is where this loader comes in. It will gather all CSS you use in your webpack project and store it internally, accessible to react-web-component. When you use this project and react-web-component, react-web-component will know where to find the CSS and write it to the shadow dom of the web component you created with it.

In essence react-web-component-style-loader is a fork of style-loader and their README can be used for detailed usage and further information. A little more technical explanation of how this loader works: The original style loader loads the CSS from your project, creates style nodes and appends them to your website. The only real difference in this loader is that it writes the style nodes to an array in our JavaScript and react-web-component will find them and append them to the web component. It is that easy.

Installation

yarn add react-web-component-style-loader --dev

Basic Usage with react-web-component

It's recommended to combine react-web-component-style-loader with the css-loader

webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "react-web-component-style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

App.js

import React from 'react';
import './app.css';

export default class App extends React.Component {
  render() {
    return <div>Hello World!</div>;
  }
}

index.js

import React from 'react';
import ReactWebComponent from 'react-web-component';
import App from './App';
import './index.css';

ReactWebComponent.create(<App />, 'my-component');

Using the react-web-component-style-loader in your webpack config will make the loader gather all CSS and store it (in the bundle). react-web-component will find the CSS and use it in its shadow dom.

Maintainers

Lukas Bombach