Custom code component CSS affects entire page instead of its own block

Hi
You can structure the custom code component like this:

<div {{ attributes }} class="mycode">
  <div>
    <button>{{ cta }}</button>
  </div>
</div>

must target elements within the component using the wrapper class. This way, the styles won’t bleed into the rest of the page.
Something like this in the screenshot

Bálint, can you please triage this?

This is the expected behavior. Component authors need to use appropriate selectors. Or use the built-in Tailwind support, which fully avoids scoping issues.

In the (probably distant) future, we can add support for CSS Modules, but even then we won't get scoping out-of-the-box — the components will need to import the CSS and reference class names that way.