0
点赞
收藏
分享

微信扫一扫

Web Components入门实例教程

代码示例

<!-- 定义组件模板 -->
<template id="UserNameTemplate">
<style>
.user-name {
color: green;
}
</style>
<div class="user-name"></div>
</template>

<script>
// 定义组件
class UserName extends HTMLElement {
constructor() {
super();

let shadow = this.attachShadow({ mode: "closed" });

let content = document
.querySelector("#UserNameTemplate")
.content.cloneNode(true);
console.log(this.getAttribute("name"));
content.querySelector(".user-name").innerText =
this.getAttribute("name");

shadow.appendChild(content);
}
}

// 注册组件
window.customElements.define("user-name", UserName);
</script>

<!-- 使用组件 -->
<user-name name="Tom"></user-name>

遗留问题

  • 按照文章写的demo,this.getAttribute("name")无法获取数据,导致传参失败

参考
Web Components 入门实例教程-阮一峰

举报

相关推荐

0 条评论