为 Web 组件创建故事时包含本地文件吗?
我有一个项目想使用 Storybook,但我不确定是否可行,而且我找不到任何答案来解决我遇到的问题。
该项目是一个 Web 组件项目,它使用基本组件类定义了多个自定义元素。例如,当您在项目中创建一个新组件时,它看起来像这样:
import { Component } from "..path/to/_component/component.js";
export class Example extends Component {
// Constructor
constructor(){ super({
template: "./example.html"
}); }
}
正如您所看到的,包含一个带有模板文件相对路径的选项对象,该对象随后由 Component 类加载,并且渲染到 Web 组件的 Shadow DOM。
问题在于 Storybook 似乎生活在它自己的泡沫中,因此当组件被注入时,即使 Component
类随之而来,它也不会带来 example.html与它一起。
有什么办法可以解决 Storybook 的这个限制吗?
I have a project I would like to use Storybook with, but I'm not sure it's possible and I can't find any answers to solve the problem I'm having.
The project is a web components project that defines several custom elements using a base component class. For example when you create a new component in the project it looks like this:
import { Component } from "..path/to/_component/component.js";
export class Example extends Component {
// Constructor
constructor(){ super({
template: "./example.html"
}); }
}
As you can see an options object with a relative path to a template file is included, which is subsequently loaded by the Component
class and rendered to the shadow DOM of the web component.
The problem with this is that Storybook seems to live in it's own bubble, so when the component is injected even though the Component
class comes along for the ride, it doesn't bring example.html
with it.
Is there any way around this limitation of Storybook?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用捆绑的 Web 组件而不是源代码。
Use your bundled webcomponents instead of the source.