Vuepress: Isolating components in iframe

[romanslonov]

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?

[Shigma]

Actually I don't consider it an issue with VuePress...... It's a question with Vue.

[timaschew]

Why you would wrap a component into a iframe? This sounds weird to me.

[romanslonov]

@timaschew seems like I described it in first post of this issue.

[timaschew]

True.

So you want to use an iframe in order to isolate styles of components which you don’t control (3rd party components, not yours), right?

I dont think iframe is a good choise for it.
The components should just use webcomponent API. This allows to isolate styles. Style values can also be provided as variables, which can be of course overwritten by specificity. Even if vuepress is overwriting them, you can always write more specific selectors.

[romanslonov]

components which you don’t control (3rd party components, not yours), right?

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

[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.

[larionov]

@timaschew Iframes might also be useful to display components at different breakpoints for responsive design.

[larionov]

Also more specific selectors will not save you from styles apllied by vuepress itself

[ulivz]

Actually I always have a idea, in VuePress we can provide a capacity of isolating context between application and preview, just like what Storybook did.

@f3ltron Do you have any ideas?

[f3ltron]

Hum i understand the problem you have actually.

@larionov For breakpoints you should not need iframes.

The problem of iframes is actually storybook are using it too. But they seem's to be bloked for evolution now. But they have something cool anyway.

Maybe we can add some reset css on a custom wrapper component that inherit everything. But it's look a lot of work to do and maintain.

Hum yeah iframes look the best stuff.

[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.

[larionov]

@timaschew not everybody can use shadow dom, for example it will not work if you need to ssr/prerender the components.

[larionov]

@f3ltron how do you demonstrate breakpoints without iframes?

[f3ltron]

I heard about something will be implemented in this way but probably as shadow dom not really good supported

[f3ltron]

Before using iframe we should find if there is any better way to do that ^^