Css Isolation ✅

Perform Isolated CSS changes on slotted components.

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

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

  • Provide custom CSS that will apply only to the slotted content

    • Works with NC's and Shared Libraries

  • Provide CSS variable overrides that will only apply to the slotted content

    • Works with Code Components, NC's, and Shared Libraries

Limitations

  • 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.

Future

When supported by Webflow, switch to an Embed property field type.

PreviousQRCode ✅NextInline SVG Icon ✅

Last updated