创建Javascript组件的最佳方法是什么？

我正在研究如何用Javascript创建组件。通过扩展HtmleElement来创建组件是个好主意吗？或者还有另一种方法。 如果你能告诉我哪一个是最好的方式

我在网上找到了这个例子，我在练习，这是一个好方法吗

<my-component id="a">Hello</my-component>
<my-component id="b">Hello</my-component>

<script>
 class MyComponent extends HTMLElement {
   get id () {
     console.log ('get id', super.id);
     return super.id;
   }

   set id (value) {
     console.log ('get id', value);
     super.id = value;
   }

   get innerHTML () {
     console.log ('get innerHTML', super.innerHTML);
     return super.innerHTML;
   }

   set innerHTML (value) {
     console.log ('set innerHTML', value);
     super.innerHTML = value;
   }
 }

 customElements.define ('my-component', MyComponent);

 const el1 = document.querySelector ('#a');
 el1.id    = 'c';

 const el2     = document.querySelector ('#b');
 el2.innerHTML = '<h2>Hello</h2>';

</script>

你好 你好 类MyComponent扩展了HtmleElement{ 获取id（）{ console.log（'get id'，super.id'）； 返回super.id； } 设置id（值）{ console.log（'get id'，value）； super.id=值； } 获取innerHTML（）{ console.log（'get innerHTML'，super.innerHTML）； 返回super.innerHTML； } 设置innerHTML（值）{ console.log（'set innerHTML'，值）； super.innerHTML=值； } } customElements.define（'my-component'，MyComponent）； const el1=document.querySelector（'a'）； el1.id='c'； const el2=document.querySelector（“#b”）； el2.innerHTML='Hello'；

---

这取决于你在找什么。如果您正在尝试构建更复杂的web应用程序，我建议您使用诸如React、Angular或Vue之类的前端框架，因为它们使编写复杂的前端变得多么优雅

---

但是，如果您更希望了解web组件和构建前端的不同方法，我鼓励您尝试使用一系列不同的工具和框架构建简单的项目，您可以找到自己最喜欢的工具和框架，并从中开始。我提到的其中一个框架可能是一个很好的起点。

你可以从谷歌上查看

Polymer

。(). 他们的

lit元素

可能是一个比

HTMLElement

更为组件友好的起点。（）使用litHtml和HtmleElement有什么区别？

HtmleElement

是浏览器JavaScript中DOM的内置部分，

lit元素

是更高级别的界面，仅在包含Polymer的网页上工作，Polymer是一个用于处理web组件的框架。（你可以看到

HTMLElement

，

lit element

和

Polymer

）我知道，它是一个类似react js的框架，可以简化工作，但如果我想，我可以创建直接从HTMLElement继承的组件，不会有任何问题（只是需要更多的工作，对吗？）。谢谢，我认为你是对的。