Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How can I inject my scss style into the Web Components? #147

Open
telephant opened this issue Nov 2, 2023 · 8 comments
Open

How can I inject my scss style into the Web Components? #147

telephant opened this issue Nov 2, 2023 · 8 comments

Comments

@telephant
Copy link

No description provided.

@telephant
Copy link
Author

For now , I have define a Web Component successly, but the style has lost.

@telephant
Copy link
Author

telephant commented Nov 2, 2023 •
edited
Loading 

export default r2wc(WalkieTalkie);

customElements.define(
  'cst-walkie-talkie',
  r2wc<IWalkieTalkieProps>(
    WalkieTalkie,
    {
      props: {
        sdkClient: "json",
      },
    },
  )
);

@bmomberger-bitovi
Copy link
Contributor

Hi @telephant ,
Can you please show how you're using the .scss file? Also how are you building your application?

@subramanian-iouring
Copy link

subramanian-iouring commented Nov 15, 2023 •
edited
Loading

@telephant @bmomberger-bitovi
Is there any way to define style in web component?
did you find any solution?

@bmomberger-bitovi
Copy link
Contributor

@subramanian-iouring

There are four ways to define style in web components with shadow DOM:

  • <style> tags within the shadow DOM
  • tags within the shadow DOM
  • Using the adoptedStyleSheets property of the shadow root
  • inline styles defined on each element

Because React components render in light DOM, CSS and other styling solutions built around React do not expect to have to use a different root for styles, and generally put styles in the . This will not work when using shadow DOM. You either have to configure your solution to use somewhere within the Shadow DOM as an anchor point for local styles, or do it yourself by placing a <style> tag with your local styles or a tag pointing to a remote stylesheet somewhere in the shadow DOM.

Shadow DOM support has only been added to r2wc recently, so we don't yet have consensus about the best practices for styling shadow components with r2wc. But we are discussing it and starting to work on solutions!

@bmomberger-bitovi bmomberger-bitovi mentioned this issue Nov 19, 2023
Open
@da1z
Copy link

da1z commented May 7, 2024

@subramanian-iouring

There are four ways to define style in web components with shadow DOM:

  • <style> tags within the shadow DOM
  • tags within the shadow DOM
  • Using the adoptedStyleSheets property of the shadow root
  • inline styles defined on each element

Because React components render in light DOM, CSS and other styling solutions built around React do not expect to have to use a different root for styles, and generally put styles in the . This will not work when using shadow DOM. You either have to configure your solution to use somewhere within the Shadow DOM as an anchor point for local styles, or do it yourself by placing a <style> tag with your local styles or a tag pointing to a remote stylesheet somewhere in the shadow DOM.

Shadow DOM support has only been added to r2wc recently, so we don't yet have consensus about the best practices for styling shadow components with r2wc. But we are discussing it and starting to work on solutions!

hello. do you have an example of any of this solutions

@telephant
Copy link
Author

Hi @telephant , Can you please show how you're using the .scss file? Also how are you building your application?

just import scss file in component, like:

import React  from 'react';

import './index.scss';

I will use the rollup postcss to compile all the scss

@telephant
Copy link
Author

telephant commented May 21, 2024 •
edited
Loading

@subramanian-iouring

There are four ways to define style in web components with shadow DOM:

  • <style> tags within the shadow DOM
  • tags within the shadow DOM
  • Using the adoptedStyleSheets property of the shadow root
  • inline styles defined on each element

Because React components render in light DOM, CSS and other styling solutions built around React do not expect to have to use a different root for styles, and generally put styles in the . This will not work when using shadow DOM. You either have to configure your solution to use somewhere within the Shadow DOM as an anchor point for local styles, or do it yourself by placing a <style> tag with your local styles or a tag pointing to a remote stylesheet somewhere in the shadow DOM.

Shadow DOM support has only been added to r2wc recently, so we don't yet have consensus about the best practices for styling shadow components with r2wc. But we are discussing it and starting to work on solutions!

Thanks for answering. But I am still confusing about the <style /> tag.

I packed the project as a UI component, so there is no <head /> in my code. And I am looking for a way to do some <style /> tag injection while rollup compiling. But the output bundle is in React way, which used React.render() to render dom, I can not find a place to inject a <style /> tag.🥺

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@da1z @telephant @bmomberger-bitovi @subramanian-iouring