\u7528\u7684\u4e45\u4e86\u4e5f\u5c31\u5fd8\u4e86\u3002\u3002\u3002<\/p>\n
<indeex-component><\/indeex-component>\n<\/code><\/pre>\nclass IndeexComponent extends HTMLElement {\n connectedCallback() {\n this.innerHTML = `<h1>Hello Indeex<\/h1>`;\n }\n}\ncustomElements.define('indeex-component', IndeexComponent);\n<\/code><\/pre>\n\u53ef\u4ee5\u5f88\u597d\u7684\u81ea\u7136\u8bed\u8a00\u5316\u3002<\/p>\n
\u5d4c\u5957\u9694\u79bb\u6807\u7b7e<\/h3>\n
\u5d4c\u5957\u9694\u79bb\u6807\u7b7e\u7684\u5b98\u65b9\u540d\u79f0\u53eb\uff1ashadow tree<\/strong>\uff0c\u7c7b\u4f3ciframe<\/strong>\uff1a<\/p>\n<div>\n <div id=\"indeex\">\n <#shadow-root>\n <style>\n div {\n background: sandybrown;\n color: darkmagenta;\n cursor: pointer;\n margin: 3ch;\n }\n <\/style>\n <div id=\"btn\">wahaha<\/div>\n <\/#shadow-root>\n <\/div>\n <div id=\"btn\">whh<\/div>\n<\/div>\n<\/code><\/pre>\nconst sr = document.getElementById('indeex').attachShadow({ mode: 'open' });\nsr.innerHTML = `<style>\ndiv {\n color: blue;\n}\n<\/style>\n<div id=\"btn\">slot<slot><\/slot><\/div>`;\n<\/code><\/pre>\n\u548cVue\u7684\u7c7b\u4f3c<\/p>\n\u81ea\u5b9a\u4e49\u6a21\u677f<\/h3>\n
\u6a21\u677f\u7c7b\u4f3c\u6807\u7b7e\u7684\u7ec4\u5408\u7684\u6a21\u5b50\uff0c\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u6a21\u677f\uff1a<\/p>\n
<template>\n <h1>Hello Indeex<\/h1>\n<\/template>\n<\/code><\/pre>\nconst template = document.querySelector('template');\nconst node = document.importNode(template.content, true);\ndocument.body.appendChild(node);\n<\/code><\/pre>\ndocument.importNode<\/em>\u65b9\u6cd5\u7528\u4e8e\u521b\u5efa\u6a21\u677f\u7684\u5185\u5bb9\u526f\u672c\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u8868\u793a\u9700\u8981\u6df1\u62f7\u8d1d\u3002<\/p>\n\u4e5f\u53ef\u4ee5\u5728\u6a21\u677f\u91cc\u4f7f\u7528\u6837\u5f0f\u548c\u4ee3\u7801\uff0c\u7c7b\u4f3c\u4e00\u4e2a\u5d4c\u5957\u4e86\u4e00\u4e2a\u5355\u72ec\u7684\u9875\u9762\uff1a<\/p>\n
<template id=\"template\">\n <script>\n const btn = document.getElementById('handleClick');\n btn.addEventListener('click', e => console.log(e));\n <\/script>\n <style>\n #handleClick {\n all: unset;\n background: navajowhite;\n border: 0;\n border-radius: 1ch;\n color: white;\n font-family: '\u6977\u4f53';\n font-size: 5ch;\n padding: 1ch 2ch;\n margin: 1ch;\n text-align: center;\n }\n <\/style>\n <button id=\"handleClick\">wahaha<\/button>\n<\/template>\n<\/code><\/pre>\nconst template = document.getElementById('template');\ndocument.body.appendChild(\n document.importNode(template.content, true)\n);\n<\/code><\/pre>\n\u4e0b\u9762\u662f\u5217\u8868\u7684\u4f8b\u5b50\uff1a<\/p>\n
<style type=\"text\/css\">\n li{\n list-style: none;\n background-color: #1E9BF9;\n margin-top: 3ch;\n padding: 2ch;\n border-radius: 1ch;\n color: #FAEBD7;\n font-size: 4ch;\n }\n .title{\n color: #008800;\n font-size: 6ch;\n }\n .author{\n color: #FFFDE8;\n font-size: 5ch;\n }\n<\/style>\n<template id=\"book\">\n <li><span class=\"title\"><\/span> — <span class=\"author\"><\/span><\/li>\n<\/template>\n<ul id=\"books\"><\/ul>\n<\/code><\/pre>\nconst fragment = document.getElementById('book');\nconst books = [{\n title: '\u4e00\u672c\u4e66',\n author: 'indeex hsi'\n },\n {\n title: '\u4e24\u672c\u4e66',\n author: 'indeex'\n },\n {\n title: '\u4e09\u672c\u4e66',\n author: 'qiary'\n }\n];\n\nbooks.forEach(book => {\n const instance = document.importNode(fragment.content, true);\n instance.querySelector('.title').innerHTML = book.title;\n instance.querySelector('.author').innerHTML = book.author;\n document.getElementById('books').appendChild(instance);\n});\n<\/code><\/pre>\n\u4e0b\u9762\u662f\u4e00\u4e2a\u5168\u5c4f\u6a21\u6001\u7a97\u53e3\u4f8b\u5b50\uff1a<\/p>\n
<style type=\"text\/css\">\n #modalBtn {\n background: tomato;\n border-radius: 2ch;\n color: #fff;\n padding: 5ch 3ch;\n position: static;\n }\n<\/style>\n<template id=\"modalTemplate\">\n <script>\n document.getElementById('modalBtn').addEventListener('click', () => {\n const wrapper = document.querySelector('.wrapper');\n const closeButton = document.querySelector('button.close');\n const wasFocused = document.activeElement;\n wrapper.classList.add('open');\n closeButton.focus();\n closeButton.addEventListener('click', () => {\n wrapper.classList.remove('open');\n wasFocused.focus();\n });\n });\n <\/script>\n <style>\n .wrapper {\n opacity: 0;\n transition: visibility 0s, opacity 0.25s ease-in;\n }\n .wrapper:not(.open) {\n visibility: hidden;\n }\n .wrapper.open {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n visibility: visible;\n }\n .overlay {\n background: rgba(0, 0, 0, 0.8);\n height: 100%;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n }\n .dialog {\n background: #ffffff;\n max-width: 800px;\n padding: 1rem;\n position: fixed;\n border-radius: 20px;\n }\n button {\n all: unset;\n cursor: pointer;\n font-size: 1.25rem;\n position: absolute;\n top: 1rem;\n right: 1rem;\n }\n\n button{\n box-sizing: border-box;\n }\n\n button:focus{\n border: none;\n }\n button:hover{\n border: 1px solid #1E9BF9;\n }\n <\/style>\n <div class=\"wrapper\">\n <div class=\"overlay\"><\/div>\n <div class=\"dialog\" role=\"dialog\" aria-labelledby=\"title\" aria-describedby=\"content\">\n <button class=\"close\" aria-label=\"Close\">\u53c9\ufe0f<\/button>\n <h1 id=\"title\">Hello Indeex<\/h1>\n <div id=\"content\" class=\"content\">\n <p>\u54c7\u54c8\u54c8\u7684\u6a21\u6001\u7a97<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/template>\n\n<button id=\"modalBtn\">\u5047\u88c5\u662f\u4e2a\u7f16\u8f91\u6309\u94ae<\/button>\n<\/code><\/pre>\nconst modalTemplate = document.getElementById('modalTemplate');\ndocument.body.appendChild(\n document.importNode(modalTemplate.content, true)\n);\n<\/code><\/pre>\n\u6a21\u677f\u5185\u53ef\u4ee5\u6709\u6837\u5f0f\u3001\u811a\u672c\uff0c\u6240\u4ee5\u4e00\u4e2a\u6a21\u677f\u53ef\u4ee5\u50cf\u7c7b\u4e00\u6837\u62e5\u6709\u81ea\u5df1\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\u3002<\/p>\n
\u5148\u8fd9\u6837\u5427\u3002\u3002<\/p>\n
code enjoy!\ud83d\ude1c\ud83d\ude1c\ud83d\ude1c<\/p>\n
\u4f5c\u8005\uff1aindeex<\/p>\n