Embedding styles in shadow DOM

[seesharper]

When we pass shadow : 'open' or shadow : 'closed' we would probably expect the styles to be included in the shadow root.
Is there any way to accomplish this?

.welcome {
    color: red;
}

React component

import './Welcome.css';

export function Welcome(props: { name: string }) {
    return <div>
        <h1 className="welcome">Welcome, {props.name}!</h1>
        <slot></slot>
    </div>
}

export default Welcome;

To create the web component

const WelcomeWC = r2wc(Welcome, {
  props: {
    name: "string"
  },
  shadow: "open"
});

customElements.define("welcome-wc", WelcomeWC);

Usage

<welcome-wc>
  </welcome-wc>

[se-andbjo]

I'm wondering the same, no styles seems to be included in the shadow dom

[danielegarciav]

First of all, this would entirely depend on how your bundler/build tool deals with CSS imports, and the constraints you have in your project. With that said, you can make it work, but at the moment it looks like you must roll your own solution.

In my situation, I am using esbuild directly, and one of my constraints is that I must end up with a single JS file as output from the bundler. I found an excellent plugin for the Bun bundler called bun-lightningcss. I use esbuild, but it was dead simple to modify it so that it works with esbuild, since Bun's API is almost identical.

Without modifications, the bun-lightningcss plugin does a couple things:

• It creates a virtual module called inject-styles. It exports a function injectStyles that adds all CSS code passed onto it into a <style> tag appended to the document's head. It also adds an ID to this tag.
• When a CSS file is imported, the target CSS file is transpiled using lightningcss, and a JS file is generated which calls injectStyles with the transpiled CSS at runtime. It also does some other stuff like set up the exported object for CSS modules.

After modifying the plugin so that it worked with esbuild, all I had to do was to extend the custom element class returned by r2wc so that it cloned the <style> tag from the host document and appended it into the shadow DOM whenever the custom element was constructed. If you see the source code for r2wc, you can see you can get it with this.container:

class MyCustomElement extends r2wc(MyComponent) {
  constructor() {
    super();
    this.container.append(document.getElementById('bun_lightningcss').cloneNode(true));
  }
}

It works like a charm and fits my use case perfectly. But you might have to find a way to do this with the tools you use if the solution doesn't exist yet.

[shogoroy]

Almost same as #172 (comment),
In case of mine, below example is worked fine.

My usecase:

• Using vite
• Using vite-plugin-css-injected-by-js to inject css in bundle file.
• Use connectedCallback instead of cunstructor (in my case, constructor not working)

Example

1. Add id to injected style tag

import { defineConfig } from "vite";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

export default defineConfig({
  plugins: [
    react(),
    cssInjectedByJsPlugin({ styleId: "<custom_id>" }), // 1. add id to style tag
  ],

  // other config here
});

2. Wrap r2wc

export const convertReact2WebComponent = (
  Component: Parameters<typeof r2wc>[0],
  options?: Parameters<typeof r2wc>[1],
) => {
  const WebComponent = r2wc(Component, options);

  class WebComponentWithStyle extends WebComponent {
    connectedCallback() { // 2. Use connectedCallback instead of constructor (this can be changed by your usecase.)
      super.connectedCallback();
      const styleTag = document.getElementById("<custom_id>");
      if (styleTag) {
        this.shadowRoot?.append(styleTag.cloneNode(true));
      }
    }
  }

  return WebComponentWithStyle;
};

3. Define Web component using wrapped r2wc

const webComponent = convertReact2WebComponent(Component, {
  props,
  shadow: "open",
});
customElements.define(name, webComponent);

I hope this helps.

[wataruoguchi]

Similar to ^but scoped example:

https://github.com/wataruoguchi/poc-spa-gh-pages/blob/main/packages/react-tailwind-fragment/src/index.tsx

import r2wc from "@r2wc/react-to-web-component";
import App from "./App";

class StyledHelloWC extends r2wc(App, {
  props: { name: "string" },
  shadow: "open",
}) {
  connectedCallback() {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    super.connectedCallback();
    // window.__styles is injected by vite-plugin-css-injected-by-js
    if (window.__styles) {
      const template = document.createElement("template");
      template.innerHTML = `<style id="vite-plugin-css-injected-by-js">${window.__styles}</style>`;
      this.shadowRoot?.appendChild(template.content.cloneNode(true));
    }
  }
}

customElements.define("hello-tailwind-wc", StyledHelloWC);

And in [vite.config.ts](https://github.com/wataruoguchi/poc-spa-gh-pages/blob/main/packages/react-tailwind-fragment/vite.config.ts) I have

plugins: [
        ...defaultConfig.plugins,
        cssInjectedByJsPlugin({
          injectCode: (cssCode: string) => {
            return `window.__styles = ${cssCode}`;
          },
        }),
      ],

[subramanian-iouring]

Hi, actually am not using vite, bun_lightningcss, etc..
i have developed my project using react CRA https://create-react-app.dev/. and using SCSS for styles. now i implementing r2wc and its working without shadomDom. but i want to build my with shadomDom enabled. am not sure how to achieve this.
If anyone have idea let me know, it will help me lot.

@danielegarciav @shogoroy @wataruoguchi @seesharper @se-andbjo

[ricmello]

@subramanian-iouring depending on the size of the project I suggest migrating to vite because CRA is deprecated. Otherwise you might have to find your own solution because CRA is buggy by itself 😞

[sjBao]

Similar to ^but scoped example:

https://github.com/wataruoguchi/poc-spa-gh-pages/blob/main/packages/react-tailwind-fragment/src/index.tsx

import r2wc from "@r2wc/react-to-web-component";
import App from "./App";

class StyledHelloWC extends r2wc(App, {
props: { name: "string" },
shadow: "open",
}) {
connectedCallback() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
super.connectedCallback();
// window.__styles is injected by vite-plugin-css-injected-by-js
if (window.__styles) {
const template = document.createElement("template");
template.innerHTML = <style id="vite-plugin-css-injected-by-js">${window.__styles}</style>;
this.shadowRoot?.appendChild(template.content.cloneNode(true));
}
}
}

customElements.define("hello-tailwind-wc", StyledHelloWC);
And in [vite.config.ts](https://github.com/wataruoguchi/poc-spa-gh-pages/blob/main/packages/react-tailwind-fragment/vite.config.ts) I have

plugins: [
...defaultConfig.plugins,
cssInjectedByJsPlugin({
injectCode: (cssCode: string) => {
return window.__styles = ${cssCode};
},
}),
],

@wataruoguchi sorry if this is an obvious question, but what do you mean by "scoped"?

also, I see from the link that you provided, some of the logic is wrapped inside a queueMicroTask function... Does the vite just recognize that during the build process?

[wataruoguchi]

@sjBao If I remember correctly, "scoped" was that it doesn't affect everything but only the web component.

queueMicroTask is running at runtime (in the browser.)

[sjBao]

@sjBao If I remember correctly, "scoped" was that it doesn't affect everything but only the web component.

queueMicroTask is running at runtime (in the browser.)

Hope I can take a little more of your time... do you have any experience getting this to work with r2wc?
Following your example, I was able to get styles imported from .css files but I cannot seem to find a way to have <styled> tags generated from styled-components to be injected into the shadowRoot