web components

作者: zxhnext | 来源:发表于2019-05-15 12:09 被阅读0次

未来学习规划
了解 Web Components
web components
Web Components
web components
Web Components
Web Components
Web Components
Web Components
Web Components使用（一）

首先来看浏览器源生的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

omi:https://github.com/Tencent/omi