为 Web 组件创建故事时包含本地文件吗?

发布于 2025-01-16 21:13:48 字数 583 浏览 2 评论 0原文

我有一个项目想使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

只是一片海 2025-01-23 21:13:48

使用捆绑的 Web 组件而不是源代码。

Use your bundled webcomponents instead of the source.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文