CSS Isolation


See if it's possible to use client-side JS to proxy the styling of Webflow's RTEs ( RTB sub-elements ), so that they are CSS-isolated.


  • Webflow broadly selects RTBs in the CSS as e.g. .my-richtext p

  • This means that any p element embedded by script or Embed in the RTB will be affected by that stying

  • This breaks the ability to embed components, forms, CTAs, call-outs, etc easily

    • Especially as none of this can be seen in the designer

Possible Solution;

  • Generate new classes based on the existing styling, affix e.g. _mutated to the class

  • Write this to a Style block

  • Assign the mutated class name to all of the desired RTE's in the RTB

    • ? Avoid Embeds

Mutated CSS gen concept;

function copyStyles(sourceClass, targetClass) {
    // Find an element with the source class
    var sourceElement = document.querySelector('.' + sourceClass);

    if (!sourceElement) {
        console.warn('No element found with class:', sourceClass);

    // Get computed styles of the source element
    var styles = window.getComputedStyle(sourceElement);

    // Create CSS string from computed styles
    var cssText = Array.from(styles).map(key => `${key}:${styles.getPropertyValue(key)}`).join(';');

    // Create a style tag and append to head
    var styleTag = document.createElement('style');

    // Add the new class with copied styles
    styleTag.sheet.insertRule(`.${targetClass} { ${cssText} }`, 0);

// Usage
copyStyles('foo', 'bar');


  • Will pick up everything in the computed style, including inherited styles. If those are changed e.g. css vars...

Last updated