此為瀏覽器的原生組件，由google推動(dòng)，參照阮一峰列舉的案例添加了注釋。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- 強(qiáng)制要求自定義元素名字必須有-連字符，用來(lái)區(qū)別是否原生元素 -->
<user-card image="https://semantic-ui.com/images/avatar2/large/kristy.png" name="User Name"
email="yourmail@some-email.com"></user-card>
<template id="userCardTemplate">
<!-- 樣式寫(xiě)在此處 -->
<style>
/* :host偽類(lèi)，指代自定義元素本身。 */
:host {
display: flex;
align-items: center;
width: 450px;
height: 180px;
background-color: #d4d4d4;
border: 1px solid #d5d5d5;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
border-radius: 3px;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.image {
flex: 0 0 auto;
width: 160px;
height: 160px;
vertical-align: middle;
border-radius: 5px;
}
.container {
box-sizing: border-box;
padding: 20px;
height: 160px;
}
.container>.name {
font-size: 20px;
font-weight: 600;
line-height: 1;
margin: 0;
margin-bottom: 5px;
}
.container>.email {
font-size: 12px;
opacity: 0.75;
line-height: 1;
margin: 0;
margin-bottom: 15px;
}
.container>.button {
padding: 10px 25px;
font-size: 12px;
border-radius: 5px;
text-transform: uppercase;
}
</style>
<img class="image">
<div class="container">
<p class="name"></p>
<p class="email"></p>
<button class="button">Follow John</button>
</div>
</template>
<script src="index.js"></script>
</body>
</html>
以下為js部分
// UserCard類(lèi)是一個(gè)與頁(yè)面中element元素對(duì)應(yīng)的類(lèi)，父類(lèi)是HTMLElement，繼承了HTML元素的特性。
// index.js
class UserCard extends HTMLElement {
constructor() {
super();
// 表示 Shadow DOM 是封閉的，不允許外部訪問(wèn)。
var shadow = this.attachShadow({ mode: 'closed' });
//獲取<template>節(jié)點(diǎn)，克隆它所有子元素，這是因?yàn)榭赡苡卸鄠€(gè)自定義元素的實(shí)例，
//這個(gè)模板還要留給其他實(shí)例使用，所以不能直接移動(dòng)它。
var templateElem = document.getElementById('userCardTemplate');
var content = templateElem.content.cloneNode(true);
//將元素中的數(shù)據(jù)塞回模板中
content.querySelector('img').setAttribute('src', this.getAttribute('image'));
content.querySelector('.container>.name').innerText = this.getAttribute('name');
content.querySelector('.container>.email').innerText = this.getAttribute('email');
shadow.appendChild(content);
}
}
// 將自定義元素與類(lèi)關(guān)聯(lián)
customElements.define('user-card', UserCard);
由此，user-card組件便可隨時(shí)使用，個(gè)人認(rèn)為語(yǔ)法略顯笨重，需配合第三方工具使用。。。
