storybook Web组件模板应该使用Web组件而不是lit-html,

9wbgstp7 于 3个月前发布在其他

关注(0)|答案(5)|浏览(31)

描述bug

当你尝试创建一个web组件故事书时，我惊讶地看到lit-html在其中。虽然我理解lit-html有助于制作web组件，但我的期望是普通的web组件。即使svelte和其他库可以制作web组件，但这不是我的期望。

web components !== lit-html

我不想在尝试使用web components时将lit-html拉入我的项目。我宁愿期望有一个单独的lit模板来做这样的事情，如果你们的项目已经在使用lit,那么这就很有意义了。

重现

使用storybook版本6.5创建一个类型为web component的故事书项目

系统

System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    npm: 8.3.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0.1
    Safari: 15.4
  npmPackages:
    @storybook/addon-actions: ^6.5.5 => 6.5.5 
    @storybook/addon-essentials: ^6.5.5 => 6.5.5 
    @storybook/addon-links: ^6.5.5 => 6.5.5 
    @storybook/builder-webpack5: ^6.5.5 => 6.5.5 
    @storybook/manager-webpack5: ^6.5.5 => 6.5.5 
    @storybook/web-components: ^6.5.5 => 6.5.5

附加上下文

请使用HTMLElement作为web component模板，这是制作web组件的标准方法

storybook

来源：https://github.com/storybookjs/storybook/issues/18351

5条答案

按热度按时间

ego6inou1#

我同意这种观点。lit-html不应该成为仅使用浏览器规范编写自定义元素的故事的依赖项。

赞(0）回复(0）举报 3个月前

06odsfpq2#

刚看到这个帖子，想加入讨论。

我是微软FAST Web Components的架构负责人。所以，我们也有点惊讶地发现Web组件设置对我们不起作用。我们现在正在为FAST构建自己的自定义解决方案，使用Storybook。

如果我们能集思广益，看看是否可以稍微解耦一些东西，以便让人们更容易以他们想要的方式构建Web组件，那就太好了。我们很乐意分享我们在自己这边所做的工作，以使事情正常运行，并提供反馈以改进整体方法。

赞(0）回复(0）举报 3个月前

b1payxdu3#

对于任何想知道的人，使用lit是当前的默认设置，但不是必需的。这个：

// MyCustomElement.ts
export class MyCustomElement extends HTMLElement {
  constructor() {
    super();
  }
}

// MyCustomElement.stories.ts
import type { Meta, StoryObj } from "@storybook/web-components";
import { MyCustomElement } from "./MyCustomElement";

customElements.define("my-custom-element", MyCustomElement);

type Props = {};

export default {
  title: "MyCustomElement",
  component: "my-custom-element",
  render: (args: any) =>
    `<my-custom-element><pre>${JSON.stringify(args)}</pre></my-custom-element>`,
} satisfies Meta<Props>;

type Story = StoryObj<Props>;

export const Default: Story = {
  args: {
    hello: "world",
  },
};

渲染为