在 custom element 的构造函数中，可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用：

我们来看一下它们的一下用法示例。下面的代码出自life-cycle-callbacks示例（查看在线示例）。这个简单示例只是生成特定大小、颜色的方块。custom element 看起来像下面这样：

这里，类的构造函数很简单 — 我们将 shadow DOM 附加到元素上，然后将一个元素和元素附加到 shadow root 上：

示例中的关键函数是 updateStyle()—它接受一个元素作为参数，然后获取该元素的 shadow root，找到元素，并添加width，height以及background-color样式。

实际的更新操作是在生命周期的回调函数中处理的，我们在构造函数中设定类这些回调函数。当元素插入到 DOM 中时，connectedCallback()函数将会执行 — 在该函数中，我们执行updateStyle() 函数来确保方块按照定义来显示；

disconnectedCallback()和adoptedCallback()回调函数只是简单地将消息发送到控制台，提示我们元素什么时候从 DOM 中移除、或者什么时候移动到不同的页面：

每当元素的属性变化时，attributeChangedCallback()回调函数会执行。正如它的属性所示，我们可以查看属性的名称、旧值与新值，以此来对元素属性做单独的操作。在当前的示例中，我们只是再次执行了updateStyle()函数，以确保方块的样式在元素属性值变化后得以更新：

需要注意的是，如果需要在元素属性变化后，触发attributeChangedCallback()回调函数，你必须监听这个属性。这可以通过定义observedAttributes() get 函数来实现，observedAttributes()函数体内包含一个 return 语句，返回一个数组，包含了需要监听的属性名称：

在我们的例子中，该段代码处于构造函数的上方。

备注： 在这里查看完整的 JavaScript 源码。