Custom HTML Component styles all pages in container

UI Builder
1

In following the blog post “Custom HTML Component” (Custom HTML Component | Backendless Marketplace), I find that creating the CustomHTML Theme Extension with the example CSS affects all the pages in the container, not just the page created to test the component.

I thought CSS Extensions only styled components (on other pages) that ‘called’ those classes in the Classes setting. What am I missing?

2

All styles which you write in extensions/components affect every page. Because after publishing we compose them into one file to minimize the count of requests to the server.

But, your question makes sense and there are a couple of things that we could review again. At least - make component styles isolated from all others.

Regards, Dima.

3

Thanks Dima, now that I understand this behavior is a ‘feature’ (not a bug), I see it’s not such a big deal.

The annoyance is how the example CSS code (from CodePen) changes the UI Builder development screen for every page in the container. The specific ‘problem’ here seems to be the wrapper section:
#wrapper {
margin-left: auto;
margin-right: auto;
max-width: 80em;
}
Commenting it out removes the unwanted UI Builder screen changes and (in my limited testing) does not affect the Preview.

However, I suspect the other CSS in the body section of this code might have the same container-wide affect. Might be useful to add a ‘disable’ control to the extensions (along with the delete and edit icons) to aid in debugging.