Question

我的问题是关于将我自己的逻辑添加到自定义元素的正确方法。

我知道如何创建自定义元素，定义扩展class的{{1}}，定义HTMLElement之类的回调。可以。

问题是：我应该如何创建自己的方法和属性来支持自定义逻辑？据我了解，直接在我的自定义元素类中定义它们可能会导致与当前（或将来）的connectedCallback属性和方法发生冲突。

Answer 1

1：避免使用任何众所周知的属性或函数，除非您要覆盖它们。如果您要覆盖它们，但仍然希望旧代码起作用，请确保在函数，getter和setter中调用super。

2：在将来发生更改之前，请不要担心。坦白说，在每个版本的语言升级中，HTMLElement所做的更改并不多。就我个人而言，我只是不用担心。我定义了我想要的任何属性和功能。我通常甚至不用担心现有功能。

例如，我将使用get title()和set title()，而我不会打扰叫super。是的，我知道我要破坏现有的模型，但是对于我所做的组件来说都没有关系。

请不要在公共函数名称中使用下划线'_'，因为传统是指那些应该是私有函数和属性，并且切勿被使用该元素的人调用

只写您需要写的东西。如果有人使用我的组件曾经需要原始的标题功能才能工作，那么我会对其进行修复，但事实可能并非如此。

Answer 2

您可以直接在自定义元素类中定义它们。

如果您不希望它们与将来的属性和方法引起冲突，则可以添加前缀：下划线“ _”，“ my”。

class MyCustomElement extends HTMLElement {
    constructor() {
        super()
        _init()
    }
    _init() {
        this.attachShadow( {mode: 'open' } )
    }
}

您还可以根据设计模型创建自己的类。例如，如果使用MVC设计模式，则可以创建类View，Model，Controller ...

html5自定义元素的自定义方法和属性

2 个答案: