使用vanilla JavaScript创建的HTML5 web组件应具有多大的通用性/特定性？

我正在设计一个使用HTML5Web组件（HTML导入、阴影DOM、模板和自定义HTML元素）的web应用程序，这些组件是用香草JavaScript（无框架）实现的。web应用程序相当简单，必须作为单页应用程序实现。应用程序的部分要求是用户界面应该是可定制的

设计方法

该示例使用了一个

自定义元素。此元素通过自定义事件（例如，

newcustomevent（'application-navigation'，{location:'/sign'}）

）和方法调用（例如，

document.querySelector（'application-navigation'）.enableSignOut（））与“顶级”JavaScript（例如，JavaScript MV*术语中的“路由器”）通信。本质上，自定义事件和方法构成了元素的“公共API”

自定义的
元素可以使用不同的HTML导入包含在应用程序中。例如，使用
或
。只要HTML导入具有相同的方法并生成相同的自定义事件，应用程序就应该以相同的方式运行，而不管使用什么用户界面自定义

这种设计的主要好处是，它通过允许非常可定制的用户界面来满足需求——内部JavaScript事件、CSS和（阴影）DOM结构在模板之间可以完全不同。它还允许在适当的情况下重用现有库。例如，默认的<>代码> /Cord>元素可以使用推特自举的下拉HTML标记，而主题版本可以使用基础库。
但是，这个组件不是很通用。它实现了一个相当特定的目的（控制导航请求），与例如
元素不同（尽管
元素可以使用（可定制的）
元素）

重述问题

我的问题是，创建自定义元素是为了实现特定的目的，还是更通用的目的，还是与目的的广度无关？
您可以构建特定的或通用的自定义元素。两者都是相关的

但是，定义自定义元素的主要好处是能够轻松地重用它们。所以我想说自定义元素通常是泛型的

关于体系结构，您可以设计通用的技术元素，然后用它们组成特定的功能元素


无论如何，用相同的标记名创建两个不同的组件不是一个好主意。您更愿意使用另一种方法来实现您的目标（使用属性或内部元素来定制您的自定义元素，或者给它另一个名称）

下面是一个将主题定义为元素属性的示例：


//自定义元素
var proto=Object.create（HTMLElement.prototype）
proto.createdCallback=函数（）
{
console.log（“{created}”）
var html=document.querySelector（“模板”）
this.innerHTML=html.innerHTML
}
proto.attributeChangedCallback=函数（attr、old、val）
{
console.log（“{changed}attr=%s，old=%s，new=%s”，attr，old，val）
}
var AN=document.registerElement（“应用程序导航”，{
原型：原型
} )
//事件
函数添加（）
{
如果（AN）
document.body.appendChild（新的AN）
}
函数主题（名称）
{
var elem=document.querySelector（“应用程序导航”）
if（elem）
元素setAttribute（“主题”，名称）
}
功能负载（）
{
var link=document.createElement（“链接”）
link.rel=“样式表”
link.href=“/content/green.css”
document.head.appendChild（链接）
}
应用程序导航[主题=蓝色]{
颜色：蓝色；
}
应用程序导航[主题=红色]{
颜色：红色；
}

添加自定义元素
先换成红色
外部CSS
标题
自定义元素内容

您是否有此类定制示例的链接？我已经用此类定制示例更新了我的答案。