描述

看起来angular的故事书渲染器没有考虑到带有属性选择器的组件(参见示例)。

重现

重现此行为的方法：

1. 创建一个带有属性选择器的组件：@Component({ selector: 'my-component[type=text]'})
2. 为该组件创建一个故事。我的故事有一个模板，例如export const default = (args) => ({ props: args, template: '<my-component type="text"></my-component>' }),但我怀疑即使没有这个，这个问题也会出现。
3. 在尝试查看故事时观察到语法错误。SyntaxError: Unexpected character "="

预期行为

故事应该正常渲染。

系统

环境信息：
系统：
操作系统：Windows 10 10.0.18363
CPU:(8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
二进制文件：
Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming
pm\yarn.CMD
npm: 6.14.6 - C:\Program Files\nodejs
npm.CMD
浏览器：
Chrome: 89.0.4389.90
Edge: Spartan (44.18362.449.0)
npmPackages:
@storybook/addon-controls: ^6.2.0-beta.15 => 6.2.0-beta.15
@storybook/addon-docs: ^6.2.0-beta.15 => 6.2.0-beta.15
@storybook/addons: ^6.2.0-beta.15 => 6.2.0-beta.15
@storybook/angular: ^6.2.0-beta.15 => 6.2.0-beta.15
@storybook/builder-webpack5: ^6.2.0-rc.12 => 6.2.0-rc.12

附加信息

FYI,在6.2.0-alpha.19中这是有效的。我进行了一些调试，发现错误是由于以下文件中的computesTemplateFromComponent方法引起的：https://github.com/storybookjs/storybook/blob/edb8b41d1850830a9e3696322f77383d9f6bb04b/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts
最后一行返回一个字符串，该字符串使用ngComponentMetadata.selector计算关闭标签，不幸的是，在我的情况下，ngComponentMetadata.selector不是一个简单的元素选择器。它还有属性，因此该方法最终返回类似于"<my-input[type="text"]><my-input[type=text]>"的内容。
最终，上面的字符串被sourceDecorator()方法传递给prettier方法，后者抱怨关闭标签的语法无效。
如果你有一个不需要更改我的组件选择器的快速解决方案，那将太好了。如果你愿意的话，我也愿意自己深入研究这个问题。