WEB\u4e00\u76f4\u5728\u5f80\u81ea\u7136\u8a00\u8bed\u5316\u65b9\u5411\u53d1\u5c55\uff0c\u800c\u7ec4\u4ef6\u5219\u662f\u81ea\u7136\u8bed\u8a00\u5316\u5f88\u597d\u7684\u65b9\u5f0f\u548c\u4f53\u73b0\u3002<\/p>\n
\u4e0eReact\u6216Angular\u76f8\u4f3c\uff0c\u4e00\u5207\u81ea\u5b9a\u4e49\u6807\u7b7e\u90fd\u7ee7\u627fHTMLElement<\/strong>\u7c7b\uff1a<\/p>\n \u6ce8\u610fthis\u6307\u5411\u3002<\/p>\n \u751f\u547d\u5468\u671f\u662f\u7ec4\u4ef6\u7684\u57fa\u672c\u529f\u80fd\uff0c\u5f53\u7ec4\u4ef6\u4ece\u52a0\u8f7d\u5230\u6e32\u67d3\u5b8c\u6210\uff0c\u6bcf\u4e00\u6b65\u90fd\u53ef\u4ee5\u63a7\u5236\uff1a<\/p>\n observedAttributes<\/strong>\u521d\u59cb\u5316\u6216\u8005\u66f4\u65b0\u65f6\u8c03\u7528<\/p>\n attributeChangedCallback<\/strong>\u5c5e\u6027\u66f4\u6539\u56de\u8c03<\/p>\n connectedCallback<\/strong>\u521d\u59cb\u5316\u8bbe\u7f6e\u3001\u5143\u7d20\u66f4\u65b0\u56de\u8c03<\/p>\n \u4ee5\u4e0b\u793a\u4f8b\u7981\u6b62\u7528\u4e8e\u5b9e\u9645\u9879\u76ee\uff1a<\/p>\n \u6f14\u793a\u5730\u5740\uff1a\u81ea\u5b9a\u4e49\u7ec4\u4ef6<\/a><\/p>\n \u5f53\u7136\uff0c\u4e5f\u53ef\u4ee5\u5b9a\u4e49\u7eaf\u903b\u8f91\u7ec4\u4ef6\uff1a<\/p>\n \u8fd9\u4e2a\u548cReact\u5f88\u7c7b\u4f3c\u3002\u3002<\/p>\n code enjoy!\ud83d\ude1c\ud83d\ude1c\ud83d\ude1c<\/p>\n \u4f5c\u8005\uff1aindeex<\/p>\n \u94fe\u63a5\uff1ahttps:\/\/indeex.club<\/a><\/p>\n \u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n WEB\u4e00\u76f4\u5728\u5f80\u81ea\u7136\u8a00\u8bed\u5316\u65b9\u5411\u53d1\u5c55\uff0c\u800c\u7ec4\u4ef6\u5219\u662f\u81ea\u7136\u8bed\u8a00\u5316\u5f88\u597d\u7684\u65b9\u5f0f\u548c\u4f53\u73b0\u3002 \u81ea\u5b9a\u4e49\u7ec4\u4ef6 \u4e0eReact\u6216Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4,5],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/203"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=203"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/203\/revisions"}],"predecessor-version":[{"id":204,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/203\/revisions\/204"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}class WaHaha extends HTMLElement {\n connectedCallback() {\n this.innerHTML = `Hello Indeex`;\n }\n}\ncustomElements.define('wa-haha', WaHaha);\n<\/code><\/pre>\n\u7ec4\u4ef6\u751f\u547d\u5468\u671f<\/h3>\n
class WaHaha extends HTMLElement {\n static get observedAttributes() {\n return ['open'];\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n if (newValue !== oldValue) {\n this[attrName] = this.hasAttribute(attrName);\n }\n }\n\n connectedCallback() {\n const template = document.getElementById('wa-haha');\n const node = document.importNode(template.content, true);\n this.appendChild(node);\n }\n}\n<\/code><\/pre>\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<wa-haha><\/wa-haha>\n<template id=\"wahaha-template\">\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>\nclass WaHaha extends HTMLElement {\n static get observedAttributes() {\n return ['open'];\n }\n\n constructor() {\n super();\n this.close = this.close.bind(this);\n this._watchEscape = this._watchEscape.bind(this);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n if (oldValue !== newValue) {\n this[attrName] = this.hasAttribute(attrName);\n }\n }\n\n connectedCallback() {\n const template = document.getElementById('wahaha-template');\n const node = document.importNode(template.content, true);\n this.appendChild(node);\n\n\n this.querySelector('button').addEventListener('click', this.close);\n this.querySelector('.overlay').addEventListener('click', this.close);\n this.open = this.open;\n }\n\n disconnectedCallback() {\n this.querySelector('button').removeEventListener('click', this.close);\n this.querySelector('.overlay').removeEventListener('click', this.close);\n }\n\n\n get open() {\n return this.hasAttribute('open');\n }\n\n\nset open(isOpen) {\n this.querySelector('.wrapper').classList.toggle('open', isOpen);\n this.querySelector('.wrapper').setAttribute('aria-hidden', !isOpen);\n if (isOpen) {\n this._wasFocused = document.activeElement;\n this.setAttribute('open', '');\n document.addEventListener('keydown', this._watchEscape);\n this.focus();\n this.querySelector('button').focus();\n } else {\n this._wasFocused && this._wasFocused.focus && this._wasFocused.focus();\n this.removeAttribute('open');\n document.removeEventListener('keydown', this._watchEscape);\n this.close();\n }\n }\n\n\n close() {\n if (this.open !== false) {\n this.open = false;\n }\n const closeEvent = new CustomEvent('wahaha-closed');\n this.dispatchEvent(closeEvent);\n }\n\n _watchEscape(event) {\n if (event.key === 'Escape') {\n this.close(); \n }\n }\n}\n\ncustomElements.define('wa-haha', WaHaha);\n\nconst button = document.getElementById('modalBtn');\nbutton.addEventListener('click', () => {\n document.querySelector('wa-haha').open = true;\n})\n<\/code><\/pre>\nclass Ehehe extends HTMLElement {\n connectedCallback() {\n this._onEheheClosed = this._onEheheClosed.bind(this);\n this.addEventListener('ehehe-closed', this._onEheheClosed);\n }\n\n get ehehes() {\n return Array.from(this.querySelectorAll('one-ehehe'));\n }\n\n _onEheheClosed(event) {\n const eheheClosed = event.target;\n const nextIndex = this.ehehes.indexOf(eheheClosed);\n if (nextIndex !== -1) {\n this.ehehes[nextIndex].open = true;\n }\n }\n}\n<\/code><\/pre>\n
\n","protected":false},"excerpt":{"rendered":"