Can you consider providing iframe mode? 能否考虑支持iframe模式

[pangao66]

I hope to provide a iframe mode so that I can write my component in vuepress and only use the component's css style

我希望能够提供iframe模式,以便能够在vuepress中写组件但是仅仅使用组件自己的css样式

Description

Proposed Solution

now I want to write a ui frameworks
there is a 'x-table' component to show in vuepress
if I don't use iframe the style of vuepress theme will influence the style of 'x-table'
becase of the default theme of vuepress has write the style of table https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/theme-default/styles/index.styl
even though I can rewrite the style to overwise the default style
but I only want not infulence the 'x-table' not all of the document of vuepress
比如 现在我需要写一个ui框架
有一个'x-table'组件需要在vuepress里面展示
如果不使用iframe, vuepress 默认的样式将会影响到这个'x-table'组件
因为vuepress 默认的主题已经写了一些table默认的样式
https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/theme-default/styles/index.styl
虽然我可以重写样式覆盖默认的样式
但是我只想默认的样式不影响'x-table'组件而不是整个文档

vuejs/vuepress#1548

[Mister-Hope]

I think you can use ShadowDom here with Web Components.

In my understanding:

In the standard web component api, you are allowed to guard it with Shadow dom. But that's not something Vue is providing, because it may hardly break the Dom structure and can lead to many issues with the concept of vue origin one.

Vue is providing scoped options for sfc,so component style won't effect the other parts. But it does lack of guarding components from outside styles. (So probably you could try to post something there)

So if you are trying to guard the styles, here are my advices:

1. Build a standard web component and use it.

   (Sadly it won't be a vue component, and it will get no ssr result)

2. Build and import a style reset at the root element

   (Increasing size)

3. Do like your said, using iframe to wrap something. Still the same as 1, but worse IMO

[pangao66]

https://d.umijs.org/guide/basic#iframe-mode
There is a document tool for ui libraries was provide to react.
In this tool, every demo can be open in a new page
why? every demo will be build with a page html, so every demo has itself html page and it will be easy to use in a iframe
In this way , we can mark the document tool to be powerful.

like this we can mack it be a demo for a mobile ui lib document
if we don't use iframe some mobile layout will be lose.

---

https://d.umijs.org/guide/basic#iframe-mode
这里有个react的组件库文档工具
在这个工具里,每个组件都能用一个新窗口打开
因为每一个demo都被打包成了一个独立的页面,因此能很容易的被使用在iframe里面
用这种方式, 能够让文档更充满活力
例如上面的图片,我们能够用文档构建一个移动端ui库的示例
如果不使用iframe ,一些移动端的布局将不好处理

[github-actions]

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 3 days.