:global(...) not working in custom elements

[dylanblokhuis]

Whenever you use the :global() modifier in custom elements the css output will still contain the modifier.

To reproduce the issue you can use this repo: dylanblokhuis/svelte-global-modifier-issue

[itswillta]

I was trying to build some custom elements with Svelte and encountered the same issue.

I have found out that :global() currently doesn't work with custom elements. When the customElement option is enabled, Svelte deliberately doesn't transform your style in any sort of way (well, except for removing the "unused selectors").

[constgen]

Native Web Components styles are isolated by the spec, aren't they? May be that's why Svelte doesn't process their styles as they are applied only to a component by the platform itself.

[s0kil]

:global() doesn't get processed at all.

[dylanblokhuis]

Until this is fixed you can use svelte-preprocess. the modifier does get compiled when using this

[JohnRSim]

Until this is fixed you can use svelte-preprocess. the modifier does get compiled when using this

I tried to use preprocess on a custom element but couldn't get it to work using :global(...
Had a look through your other projects encase you had any examples but didn't see anything in the rollup-config.

[LunaTK]

Native Web Components styles are isolated by the spec, aren't they? May be that's why Svelte doesn't process their styles as they are applied only to a component by the platform itself.

I agree.

But in that sense, any selector inside :global should be unwrapped, since :global is meaningless.

However, svelte currently does not touch :global at all, leaving it even after compilation.
Since :global is not standard css spec, any style using :global doesn't work at all.

I think it should at least be unwrapped.

[kmmbvnr]

It seems :global style removing happens in the Stylesheet.transform (second arg) And that transformation explicitly disabled for custom elements

https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/render_dom/index.ts#L32

[diegologs]

Any update on this or at least a workaround?

The idea of ​​using :global is simply to be able to write CSS rules that are not in the component markup. Another solution could be to be able to disable globally the option to delete unused CSS.

Thanks for your work!

[sawden]

Is there already a solution for global styles with "customElement: true"? 😕

[vospascal]

Cant you use :host in custom-elements web components ?

[SergkeiM]

+1 to this,

Until this is fixed, I used content-replace-webpack-plugin

To replace :global() (used with <style global>)

plugins: [
	new ContentReplacePlugin({
        	rules: {
		      '**/*.js': content => content.replace(/:global\((.*?)\)/g, '$1')
	          }
	})
]

Update: is better to use this regex: /:global\(([\[\]\(\)\-\.\:\*\w]+)\)/g (above was replacing some characters that shoud remain.

Update 2: (Vite)

Can you use vite-plugin-replace

plugins: [
        replaceCodePlugin({
            replacements: [
                {
                    from: /:global\(([\[\]\(\)\-\.\:\*\w]+)\)/g,
                    to: "$1",
                }
            ]
        }),
    ]

Dirty but as temp fix.

[WIStudent]

I also ran into the issue that svelte kept removing css because it thought it was unused. Instead of using :global I found a different workaround. I moved the css into a separate file and imported it inside the <script> block (I am using vite, it already comes with the necessary loaders).

import css from './App.scss';

Then I used a <svelte:element> to add the css to the shadow-root.

<svelte:element this="style">{@html css}</svelte:element>

This way svelte will not remove "unused" css. See the full example below:

// App.scss
@use "@material/card";
@include card.core-styles;

<!-- App.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { MDCRipple } from '@material/ripple';
  import logo from './assets/svelte.png';
  import css from './App.scss';

  let primaryAction: HTMLDivElement;

  onMount(() => {
    MDCRipple.attachTo(primaryAction);
  });
</script>

<svelte:options tag="my-card"/>

<svelte:element this="style">{@html css}</svelte:element>
<div class="mdc-card">
  <div
    bind:this={primaryAction}
    class="mdc-card__primary-action"
    tabindex="0"
  >
    <div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-image: url({logo});"></div>
    <div class="mdc-card__ripple"></div>
  </div>
</div>


<style>
  :host .my-card__media {
    background-size: contain;
  }
</style>

[Oreilles]

It's not just :global though, it seems that the component css isn't processed at all by the preprocessor plugin.
For examle, having this snipped inside a svelte component tagged for web component export:

<style lang="scss">
    @import 'maplibre-gl/dist/maplibre-gl.css';
</style>

This results in the @import being present as is in the style element of the shadow dom.

[anuj-kosambi]

@Oreilles

I don't know this will be correct way to do or not, but I had managed to get workaround by this

1. compiling differently for web-components and normal svelte components folder
2. by creating separate two files for single component in web-components and components folder
3. importing appropriate svelte component in web-component

Example

components/
   normal.svelte
web-components/
   normal.svelte

components/normal.svelte

<svelte:options tag={null} />

<span class=".container">
    <SomeNestedComponent class="nested"/>
</span>

<style>
  .container :global(.nested){
     background: red
  }
</style>

web-components/normal.svelte

<svelte:options tag="normal" />


<script>
import Normal from '../components/normal.svelte'
</script>

<Normal/>

vite.config.js

export default defineConfig({

  build: {

  },
  plugins: [
    svelte({
      include: './src/web-components/*',
      compilerOptions: {
        customElement: true
      }
    }),
    svelte({
      exclude: './src/web-components/*',
      emitCss: false,
      compilerOptions: {
        customElement: false
      }
    }),
    svg(),
  ]
})

[dummdidumm]

Closed via #8457, to be released in Svelte 4