# CSS Isolation

Concept

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.

Problem;

* 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; 

```javascript
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);
        return;
    }

    // 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');
    document.head.appendChild(styleTag);

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

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

Dislikes; 

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-richtext/richtext/css-isolation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.