Web Components 原生开发使html组件化模块化

目录结构：

入口文件：==index.html==

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>使用组件</title>
		<!-- <link rel="import" href="components/hello-world.html" id="hello-world"> -->
	</head>
	<body>
		<hello-world></hello-world>


		<script type="module" src="./components/hello-world.js"></script>
	</body>
</html>

模块文件：

// import './header.js' //引入组件

class HelloWorld extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.innerHTML = this.template();
	}
	template() {
		return `
			<style>
					h1{
					color: #f00;
					}
			</style>

			<h1>组件元素</h1>
			<!-- <edo-header></edo-header> -->
		`;
	}
	// 生命周期：首次被插入文档DOM时
	connectedCallback() {
		console.log('template element is connected');
	}
	// 生命周期：从文档DOM中删除时
	disconnectedCallback() {
		console.log(1111);
	}
	// 生命周期：被移动到新的文档时
	adoptedCallback() {
		console.log(22222);
	}

	// 生命周期：监听属性变化
	attributeChangedCallback() {
		console.log(3333333);
	}
}
customElements.define('hello-world', HelloWorld);