web components
2019-05-15 本文已影响0人
zxhnext
- 首先来看浏览器源生的web components demo
https://www.webcomponents.org
1.1 来创建一个自定义组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
class ButtonHelloElement extends HTMLButtonElement {
constructor() {
super()
this.addEventListener('click', () => {
alert('hello world')
})
}
}
customElements.define('button-hello', ButtonHelloElement, {
extends: 'button'
})
</script>
<button is="button-hello">hello world</button>
</body>
</html>
1.2 template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<template id="template">
<p>Smile!</p>
</template>
<script>
const fragment = document.getElementById('template').content.cloneNode(true);
fragment.firstChild.textContent += "yideng";
document.body.appendChild(fragment);
</script>
</body>
</html>
1.3 import
先新建一个tes.html
<body>
<div class="logo">
123
</div>
</body>
然后我们在index.html中引入tes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="import" href="./tes.html">
</head>
<body>
<div id="test"></div>
<script>
const link = document.querySelector('link[rel=import]')
const header = link.import;
const pulse = header.querySelector('div.logo');
console.log(pulse)
//获取 import 的 HTML 的 document
const d = document.currentScript.ownerDocument
</script>
</body>
</html>
x-tag: https://x-tag.github.io/docs
polymer.js
san.js
