What is the best way to change the CSS for shadow DOM components?

Author Posts

Ivan C. May 29, 2023 at 9:20 am

The SureCart (an alternative to WooCommerce) components use shadow DOM.

For SureCart components, changing CSS with MicroThemer is very difficult.

https://docs–surecart-docs.netlify.app/docs/styling/


@Sebastian, do you have any ideas, suggestions?

Sebastian May 29, 2023 at 9:25 am

Hey Ivan,

It looks like your post got caught in the spam filter before, apologies for the delay in responding.

Shadow DOM components can be styled using CSS variables (AKA custom properties) and the CSS ::part() pseudo element.

CSS variables

Regarding using CSS variables, this should be possible in Microthemer right now. The following video shows the workflow:

https://themeover.com/css-variables/

But instead of using :root or html as the selector, you should use :root:root

That is what’s used in the SureCart docs example, presumably to increase the CSS specificity of the rule, so that it overrides the SureCart variable definitions.

You will also want to make sure you add the variable styles to a global folder in MT (as opposed to a page-specific folder). When you create a new folder using the (+) icon in the folders menu, they are global by default. As opposed to folders that are created automatically when the “Auto folder” option is checked and set to “Page”. See the bottom left of MT. That option is on by default on new Microthemer installs.

Styling shadow dom elements with ::part()

This will require an update to Microthemer’s targeting system, but I’m certainly up for doing that. I’ll let you know how I get on with that.

Cheers!
Sebastian

Sebastian May 29, 2023 at 7:27 pm

By the way, when you’re adding a variable to override the SureCart ones, you need use the following:

:root:root {
   --sc-color-primary-500: red;
}

Rather than:

:root:root {
   --primary-background: red;
}

Even if you see something like the following when inspecting the styles using Chrome’s dev tools:

.button.button--standard.button--primary {
   background-color: var(--primary-background);
}

That’s because the shadow DOM element sets –primary-background as such: 

:host {
   --primary-color: var(--sc-color-primary-text);
}

From the main document, which is where MT styles load, you can only override –sc-color-primary-text, which is a CSS variable that the shadow dom element inherits. You can’t override –primary-color, which is set inside the shadow element.

In the Chrome inspection Styles pane, you can click on variables to see what value they have been set to. That’s how you can trace back to CSS variables you can set (–sc-color-primary-500 in this case).

I hope that helps!

Sebastian

Ivan C. May 31, 2023 at 12:21 pm

Thank you @Sebastian

You must login or register to reply to this topic.