[TOC] ## 用 template 解决 (推荐) ``` <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"> <style> :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</button> </div> </template> <script> class UserCard extends HTMLElement { constructor() { super(); let shadow = this.attachShadow( { mode: 'closed' } ); let templateElem = document.getElementById('userCardTemplate'); let content = templateElem.content.cloneNode(true); //获取参数 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.$button = content.querySelector("button"); shadow.$button.addEventListener("click",this.listener); shadow.appendChild(content); } listener(){ alert("asdsd"); } } window.customElements.define('user-card', UserCard); </script> ``` ## 导入组件 `<link rel="import" href="user-card.html">`