Isolating components in iframe

Feature request

What problem does this feature solve?

Styles intersection.

What does the proposed API look like?

Users components might be wrapped with iframe.

How should this be implemented in your opinion?

As a plugin.

Are you willing to work on this yourself?

Yes, but for now I don’t know where to start.

Okay, I am developing design system and vue components library and found that my components styles are overwritten by vuepress default theme. Specifically component like table, etc. So it would be great if we can develop plugin/component which will render provided component in iframe.

Example:

<v-frame>
  <my-button>My isolated button</button>
</v-frame>

This might be extremely useful for UI library authors.

I’d develop this plugin/component but need to help to figure out how to throw styles into iframe?

[timaschew]

No, it’s my library. I’m using vuepress to build a documentation for it.

One reason more not to use iframes.
Just use more specific selectors or variables.

[timaschew]

Just use a shadow DOM, then your styles will be isolated, they can only be overwritten by variables, which you can control by giving a unique name.