> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-components/css-isolation.md).

# Css Isolation ✅

Perform Isolated CSS changes on slotted components.

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FK0GjWPZo7PaAEqyFwoq4%2Fimage.png?alt=media&amp;token=76b240e9-8620-4456-803e-f57ff29ea921" alt=""><figcaption></figcaption></figure>

Webflow's Native Component and Code Component styling doesn't directly support the styling of component instances. &#x20;

There are some excellent design systems that allow you to pass in classes ( to Native Components and Shared Library Components ), however these do not support Code Components.

## Features&#x20;

* Provide custom CSS that will apply only to the slotted content&#x20;
  * Works with NC's and Shared Libraries&#x20;
* Provide CSS variable overrides that will only apply to the slotted content&#x20;
  * Works with Code Components, NC's, and Shared Libraries&#x20;

## Limitations&#x20;

* In some cases the styling may not render properly at design-time due to design canvas differences.  Most will be visible at design time but publish to staging to be certain.  Preview mode may work as well. &#x20;

## Future&#x20;

When supported by Webflow, switch to an Embed property field type.&#x20;