在前面的文章中，我们已经介绍了 Polymer 的一些基础知识和使用方法。本篇文章将会着重介绍 Polymer 中的 Custom Elements，包括如何创建和使用 Custom Elements，以及一些实用的技巧和注意事项。
什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它可以让你创建自定义的 HTML 元素，这些元素可以被其他开发者使用和扩展。使用 Custom Elements 可以让你更加灵活地组织你的代码，把复杂的功能封装成一个自定义元素，从而提高代码的复用性和可维护性。
在 Polymer 中，Custom Elements 是通过继承 Polymer.Element 类来实现的。Polymer.Element 是 Polymer 框架中的一个基础类，它提供了一些常用的功能和生命周期方法，可以让你更加方便地创建和管理自定义元素。
创建 Custom Elements
在 Polymer 中创建 Custom Elements 非常简单，只需要继承 Polymer.Element 类，并在自定义元素的标签名上加上 is 属性即可。例如，下面的代码演示了如何创建一个自定义元素 my-element：
// javascriptcn.com 代码示例
<dom-module id="my-element">
<template>
<h1>Hello, World!</h1>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>上面的代码中，我们定义了一个名为 MyElement 的 JavaScript 类，它继承自 Polymer.Element，并且通过 static get is() 方法指定了元素的标签名为 my-element。在 script 标签中，我们使用 customElements.define() 方法注册了这个自定义元素，这样它就可以在页面中使用了。
注意，我们把整个自定义元素的代码包裹在了一个 dom-module 标签中。这是因为在 Polymer 中，所有的元素都应该被包裹在一个 dom-module 中，这样可以更加方便地管理元素的样式和行为。
使用 Custom Elements
使用 Custom Elements 和使用普通的 HTML 元素没有什么区别，只需要在 HTML 中使用元素的标签名即可。例如，如果我们要在页面中使用上面定义的 my-element 元素，只需要像下面这样写：
<body> <my-element></my-element> </body>
在页面中添加了这个元素后，它就会显示出来，里面的内容是我们在模板中定义的 Hello, World!。
生命周期方法
Polymer.Element 提供了一些生命周期方法，可以让你在自定义元素的不同阶段执行一些操作。下面是一些常用的生命周期方法：
- constructor()：构造函数，在元素被创建时执行。
- connectedCallback()：在元素被添加到页面中时执行。
- disconnectedCallback()：在元素从页面中移除时执行。
- attributeChangedCallback()：在元素的一个属性发生变化时执行。
这些生命周期方法可以让你更加方便地处理自定义元素的各种状态和事件。例如，如果你想在元素被添加到页面中时执行一些初始化操作，可以在 connectedCallback() 方法中编写相应的代码。
实用技巧和注意事项
在使用 Custom Elements 的过程中，还有一些实用的技巧和注意事项需要注意。下面是一些常见的问题和解决方法：
在自定义元素中使用 CSS
在自定义元素中使用 CSS 时，需要注意以下几点：
- 样式必须写在一个 style 标签中，否则不会生效。
- 样式中的选择器要加上 :host 前缀，表示这个样式是作用于自定义元素本身的。
例如，下面的代码演示了如何为 my-element 元素设置样式：
// javascriptcn.com 代码示例
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
background-color: #eee;
}
h1 {
color: red;
}
</style>
<h1>Hello, World!</h1>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>在这个例子中，我们为 my-element 元素设置了一个灰色的背景和红色的标题文字。
在自定义元素中使用属性
在自定义元素中使用属性时，需要注意以下几点：
- 属性必须在元素的 constructor() 方法中定义，否则不会生效。
- 属性的值可以通过 this.getAttribute() 方法获取。
- 属性的值发生变化时，可以在 attributeChangedCallback() 方法中处理。
例如，下面的代码演示了如何为 my-element 元素添加一个 message 属性：
// javascriptcn.com 代码示例
<dom-module id="my-element">
<template>
<h1>Hello, {{message}}!</h1>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
message: {
type: String,
value: 'World'
}
};
}
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'message') {
this.message = newVal;
}
}
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>在这个例子中，我们为 my-element 元素添加了一个 message 属性，它的类型为字符串，初始值为 World。在模板中，我们使用了双括号语法来引用这个属性的值。在 attributeChangedCallback() 方法中，我们处理了这个属性的变化事件，把新的值赋给了 message 属性。
在自定义元素中使用事件
在自定义元素中使用事件时，需要注意以下几点：
- 事件可以通过 this.dispatchEvent() 方法触发。
- 事件的类型必须是字符串，可以自定义，但建议使用驼峰式命名法。
- 事件的数据可以通过 CustomEvent 对象传递。
例如，下面的代码演示了如何为 my-element 元素添加一个 click 事件：
// javascriptcn.com 代码示例
<dom-module id="my-element">
<template>
<h1>Hello, {{message}}!</h1>
<button on-click="_handleClick">Click me!</button>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
message: {
type: String,
value: 'World'
}
};
}
_handleClick() {
this.dispatchEvent(new CustomEvent('my-click', {
bubbles: true,
composed: true,
detail: {
message: this.message
}
}));
}
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>在这个例子中，我们为 my-element 元素添加了一个 click 事件，并在模板中添加了一个按钮来触发这个事件。在 _handleClick() 方法中，我们通过 this.dispatchEvent() 方法触发了一个自定义事件 my-click，并传递了一个包含 message 属性的 CustomEvent 对象。
示例代码
最后，我们来看一个完整的示例代码，它演示了如何创建一个带有属性和事件的自定义元素：
// javascriptcn.com 代码示例
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
background-color: #eee;
}
h1 {
color: red;
}
</style>
<h1>Hello, {{message}}!</h1>
<button on-click="_handleClick">Click me!</button>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
message: {
type: String,
value: 'World'
}
};
}
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'message') {
this.message = newVal;
}
}
_handleClick() {
this.dispatchEvent(new CustomEvent('my-click', {
bubbles: true,
composed: true,
detail: {
message: this.message
}
}));
}
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
<body>
<my-element message="Polymer"></my-element>
<script>
const element = document.querySelector('my-element');
element.addEventListener('my-click', e => {
alert(`You clicked me with message: ${e.detail.message}`);
});
</script>
</body>在这个示例中，我们创建了一个名为 my-element 的自定义元素，并添加了一个 message 属性和一个 my-click 事件。在页面中，我们添加了一个 my-element 元素，并给它的 message 属性赋值为 Polymer。在 JavaScript 中，我们监听了 my-click 事件，并在事件处理函数中弹出了一个对话框，显示了事件传递的 message 属性的值。
总结
本篇文章介绍了 Polymer 中的 Custom Elements，包括如何创建和使用 Custom Elements，以及一些实用的技巧和注意事项。Custom Elements 是 Web Components 的核心之一，它可以让你更加灵活地组织你的代码，提高代码的复用性和可维护性。在实际开发中，我们可以根据具体的需求来创建和使用 Custom Elements，从而提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6550a04b7d4982a6eb9681f6