发布自定义元素，命名约定，最佳实践？

Question

我即将公开自定义元素<card-t>

预发布时间：https://github.com/card-ts/playingcardts

建议和改进非常感谢！

几个问题：

Naming Custom Elements

有：https://www.webcomponents.org/community/articles/how-should-i-name-my-element 但它没有过去“必须包括一个连字符”

我和element.card-t.js一起去分类。

其他最佳实践??

Wrapping in IIFE & ES Modules?

自定义元素在全局命名空间中创建，并且不会像库那样返回任何内容。

在IIFE中包装应该足够了吗？

将它作为模块加载是否有价值？

<script type="module" src="element.card-t.js">

Extending Custom Elements

我们应该默认返回类定义，以便更容易扩展吗？

Answer 1

由于这是一个意见问题，这些是我的意见：

命名自定义元素

我总是根据我的类名命名我的JS文件，我的类名只是标签名称但是大写。所以我的标签<my-thing>将有一个类名MyThing，我的文件名将是components/MyThing.js

包装在IIFE和ES模块中？

我在ES6 +中创建了所有代码，然后创建了一个额外的ES5 CommonJS版本和一个ES5 IIFE版本，让人们加载他们想要的东西。

我使用rollup和我的component-build-tools来创建我的各种版本。 component-build-tools component-build-tools还将组件的所有依赖项组合到输出文件中。这可能会导致一些复制，但大多数时候我都不介意。

我的组件最终将其模板和区域设置字符串嵌入到已发布的文件中。这是组件构建工具的一个功能。

扩展自定义元素

作为一般规则，我以我的文件的所有三种格式公开类名。这确实有助于扩展我的组件，但我怀疑很多人会想要这样做。

放置文件的位置。

最难的是放置文件的位置，以便网页轻松访问它们。

我有一个构建步骤，将我的文件从node_modules文件夹复制到dist文件夹。这对我来说最容易知道我的文件所在的位置。

这样做允许我npm install任何东西，然后仍然将他们的文件放到我知道并可以使用的位置。但它也导致我不必担心我的文件在我的仓库中的最终位置。

我确实倾向于有一个dist文件夹，在那里我有：

dist
 +- js
     +- components
         +- MyThing.js
         +- MyThing.min.js
         +- AnotherThing.js
         +- AnotherThing.min.js
         +- SoOn.js
         +- SoOn.min.js