{"id":752,"date":"2024-07-04T20:47:34","date_gmt":"2024-07-04T12:47:34","guid":{"rendered":"https:\/\/levin.ink\/?p=752"},"modified":"2024-07-04T20:47:34","modified_gmt":"2024-07-04T12:47:34","slug":"js-3-21-web-components","status":"publish","type":"post","link":"https:\/\/levin.ink\/?p=752","title":{"rendered":"JS – 3-21 Web components"},"content":{"rendered":"

Custom elements<\/h1>\n

\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u63cf\u8ff0\u5e26\u6709\u81ea\u5df1\u7684\u65b9\u6cd5\u3001\u5c5e\u6027\u548c\u4e8b\u4ef6\u7b49\u7684\u7c7b\u6765\u521b\u5efa\u81ea\u5b9a\u4e49 HTML \u5143\u7d20\u3002
\n\u5728 custom elements \uff08\u81ea\u5b9a\u4e49\u6807\u7b7e\uff09\u5b9a\u4e49\u5b8c\u6210\u4e4b\u540e\uff0c\u6211\u4eec\u53ef\u4ee5\u5c06\u5176\u548c HTML \u7684\u5185\u5efa\u6807\u7b7e\u4e00\u540c\u4f7f\u7528\u3002
\n\u8fd9\u662f\u4e00\u4ef6\u597d\u4e8b\uff0c\u56e0\u4e3a\u867d\u7136 HTML \u6709\u975e\u5e38\u591a\u7684\u6807\u7b7e\uff0c\u4f46\u4ecd\u7136\u662f\u6709\u7a77\u5c3d\u7684\u3002\u5982\u679c\u6211\u4eec\u9700\u8981\u50cf\u00a0<easy-tabs><\/code>\u3001<sliding-carousel><\/code>\u3001<beautiful-upload><\/code>\u2026\u2026 \u8fd9\u6837\u7684\u6807\u7b7e\uff0c\u5185\u5efa\u6807\u7b7e\u5e76\u4e0d\u80fd\u6ee1\u8db3\u6211\u4eec\u3002
\n\u6211\u4eec\u53ef\u4ee5\u628a\u4e0a\u8ff0\u7684\u6807\u7b7e\u5b9a\u4e49\u4e3a\u7279\u6b8a\u7684\u7c7b\uff0c\u7136\u540e\u4f7f\u7528\u5b83\u4eec\uff0c\u5c31\u597d\u50cf\u5b83\u4eec\u672c\u6765\u5c31\u662f HTML \u7684\u4e00\u90e8\u5206\u4e00\u6837\u3002
\nCustom elements \u6709\u4e24\u79cd\uff1a<\/p>\n

    \n
  1. Autonomous custom elements \uff08\u81ea\u4e3b\u81ea\u5b9a\u4e49\u6807\u7b7e\uff09<\/strong>\u00a0\u2014\u2014 \u201c\u5168\u65b0\u7684\u201d \u5143\u7d20, \u7ee7\u627f\u81ea\u00a0HTMLElement<\/code>\u00a0\u62bd\u8c61\u7c7b.<\/li>\n
  2. Customized built-in elements \uff08\u81ea\u5b9a\u4e49\u5185\u5efa\u5143\u7d20\uff09<\/strong>\u00a0\u2014\u2014 \u7ee7\u627f\u5185\u5efa\u7684 HTML \u5143\u7d20\uff0c\u6bd4\u5982\u81ea\u5b9a\u4e49\u00a0HTMLButtonElement<\/code>\u00a0\u7b49\u3002
    \n\u6211\u4eec\u5c06\u4f1a\u5148\u521b\u5efa autonomous \u5143\u7d20\uff0c\u7136\u540e\u518d\u521b\u5efa customized built-in \u5143\u7d20\u3002
    \n\u5728\u521b\u5efa custom elements \u7684\u65f6\u5019\uff0c\u6211\u4eec\u9700\u8981\u544a\u8bc9\u6d4f\u89c8\u5668\u4e00\u4e9b\u7ec6\u8282\uff0c\u5305\u62ec\uff1a\u5982\u4f55\u5c55\u793a\u5b83\uff0c\u4ee5\u53ca\u5728\u6dfb\u52a0\u5143\u7d20\u5230\u9875\u9762\u548c\u5c06\u5176\u4ece\u9875\u9762\u79fb\u9664\u7684\u65f6\u5019\u9700\u8981\u505a\u4ec0\u4e48\uff0c\u7b49\u7b49\u3002
    \n\u901a\u8fc7\u521b\u5efa\u4e00\u4e2a\u5e26\u6709\u51e0\u4e2a\u7279\u6b8a\u65b9\u6cd5\u7684\u7c7b\uff0c\u6211\u4eec\u53ef\u4ee5\u5b8c\u6210\u8fd9\u4ef6\u4e8b\u3002\u8fd9\u975e\u5e38\u5bb9\u6613\u5b9e\u73b0\uff0c\u6211\u4eec\u53ea\u9700\u8981\u6dfb\u52a0\u51e0\u4e2a\u65b9\u6cd5\u5c31\u884c\u4e86\uff0c\u540c\u65f6\u8fd9\u4e9b\u65b9\u6cd5\u90fd\u4e0d\u662f\u5fc5\u987b\u7684\u3002
    \n\u4e0b\u9762\u5217\u51fa\u4e86\u8fd9\u51e0\u4e2a\u65b9\u6cd5\u7684\u6982\u8ff0\uff1a<\/li>\n<\/ol>\n
    class MyElement extends HTMLElement {\n  constructor() {\n    super();\n    \/\/ \u5143\u7d20\u5728\u8fd9\u91cc\u521b\u5efa\n  }\n\n  connectedCallback() {\n    \/\/ \u5728\u5143\u7d20\u88ab\u6dfb\u52a0\u5230\u6587\u6863\u4e4b\u540e\uff0c\u6d4f\u89c8\u5668\u4f1a\u8c03\u7528\u8fd9\u4e2a\u65b9\u6cd5\n    \/\/\uff08\u5982\u679c\u4e00\u4e2a\u5143\u7d20\u88ab\u53cd\u590d\u6dfb\u52a0\u5230\u6587\u6863\uff0f\u79fb\u9664\u6587\u6863\uff0c\u90a3\u4e48\u8fd9\u4e2a\u65b9\u6cd5\u4f1a\u88ab\u591a\u6b21\u8c03\u7528\uff09\n  }\n\n  disconnectedCallback() {\n    \/\/ \u5728\u5143\u7d20\u4ece\u6587\u6863\u79fb\u9664\u7684\u65f6\u5019\uff0c\u6d4f\u89c8\u5668\u4f1a\u8c03\u7528\u8fd9\u4e2a\u65b9\u6cd5\n    \/\/ \uff08\u5982\u679c\u4e00\u4e2a\u5143\u7d20\u88ab\u53cd\u590d\u6dfb\u52a0\u5230\u6587\u6863\uff0f\u79fb\u9664\u6587\u6863\uff0c\u90a3\u4e48\u8fd9\u4e2a\u65b9\u6cd5\u4f1a\u88ab\u591a\u6b21\u8c03\u7528\uff09\n  }\n\n  static get observedAttributes() {\n    return [\/* \u5c5e\u6027\u6570\u7ec4\uff0c\u8fd9\u4e9b\u5c5e\u6027\u7684\u53d8\u5316\u4f1a\u88ab\u76d1\u89c6 *\/];\n  }\n\n  attributeChangedCallback(name, oldValue, newValue) {\n    \/\/ \u5f53\u4e0a\u9762\u6570\u7ec4\u4e2d\u7684\u5c5e\u6027\u53d1\u751f\u53d8\u5316\u7684\u65f6\u5019\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u4f1a\u88ab\u8c03\u7528\n  }\n\n  adoptedCallback() {\n    \/\/ \u5728\u5143\u7d20\u88ab\u79fb\u52a8\u5230\u65b0\u7684\u6587\u6863\u7684\u65f6\u5019\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u4f1a\u88ab\u8c03\u7528\n    \/\/ \uff08document.adoptNode \u4f1a\u7528\u5230, \u975e\u5e38\u5c11\u89c1\uff09\n  }\n\n  \/\/ \u8fd8\u53ef\u4ee5\u6dfb\u52a0\u66f4\u591a\u7684\u5143\u7d20\u65b9\u6cd5\u548c\u5c5e\u6027\n}\n<\/code><\/pre>\n
    \u5728\u7533\u660e\u4e86\u4e0a\u9762\u51e0\u4e2a\u65b9\u6cd5\u4e4b\u540e\uff0c\u6211\u4eec\u9700\u8981\u6ce8\u518c\u5143\u7d20\uff1a<\/p>\n
    \/\/ \u8ba9\u6d4f\u89c8\u5668\u77e5\u9053\u6211\u4eec\u65b0\u5b9a\u4e49\u7684\u7c7b\u662f\u4e3a <my-element> \u670d\u52a1\u7684\ncustomElements.define("my-element", MyElement);\n<\/code><\/pre>\n
    \u73b0\u5728\u5f53\u4efb\u4f55\u5e26\u6709\u00a0<my-element><\/code>\u00a0\u6807\u7b7e\u7684\u5143\u7d20\u88ab\u521b\u5efa\u7684\u65f6\u5019\uff0c\u4e00\u4e2a\u00a0MyElement<\/code>\u00a0\u7684\u5b9e\u4f8b\u4e5f\u4f1a\u88ab\u521b\u5efa\uff0c\u5e76\u4e14\u524d\u9762\u63d0\u5230\u7684\u65b9\u6cd5\u4e5f\u4f1a\u88ab\u8c03\u7528\u3002\u6211\u4eec\u540c\u6837\u53ef\u4ee5\u4f7f\u7528\u00a0document.createElement('my-element')<\/code>\u00a0\u5728 JavaScript \u91cc\u521b\u5efa\u5143\u7d20\u3002<\/p>\n
    \n
    Custom element \u540d\u79f0\u5fc5\u987b\u5305\u62ec\u4e00\u4e2a\u77ed\u6a2a\u7ebf\u00a0-<\/code>
    \nCustom element \u540d\u79f0\u5fc5\u987b\u5305\u62ec\u4e00\u4e2a\u77ed\u6a2a\u7ebf\u00a0-<\/code>, \u6bd4\u5982\u00a0my-element<\/code>\u00a0\u548c\u00a0super-button<\/code>\u00a0\u90fd\u662f\u6709\u6548\u7684\u5143\u7d20\u540d\uff0c\u4f46\u00a0myelement<\/code>\u00a0\u5e76\u4e0d\u662f\u3002
    \n\u8fd9\u662f\u4e3a\u4e86\u786e\u4fdd custom element \u548c\u5185\u5efa HTML \u5143\u7d20\u4e4b\u95f4\u4e0d\u4f1a\u53d1\u751f\u547d\u540d\u51b2\u7a81\u3002<\/p>\n<\/blockquote>\n
    \u6e32\u67d3\u987a\u5e8f<\/h2>\n
    \u5728 HTML \u89e3\u6790\u5668\u6784\u5efa DOM \u7684\u65f6\u5019\uff0c\u4f1a\u6309\u7167\u5148\u540e\u987a\u5e8f\u5904\u7406\u5143\u7d20\uff0c\u5148\u5904\u7406\u7236\u7ea7\u5143\u7d20\u518d\u5904\u7406\u5b50\u5143\u7d20\u3002\u4f8b\u5982\uff0c\u5982\u679c\u6211\u4eec\u6709\u00a0<outer><inner><\/inner><\/outer><\/code>\uff0c\u90a3\u4e48\u00a0<outer><\/code>\u00a0\u5143\u7d20\u4f1a\u9996\u5148\u88ab\u521b\u5efa\u5e76\u63a5\u5165\u5230 DOM\uff0c\u7136\u540e\u624d\u662f\u00a0<inner><\/code>\u3002
    \n\u8fd9\u5bf9 custom elements \u4ea7\u751f\u4e86\u91cd\u8981\u5f71\u54cd\u3002
    \n\u6bd4\u5982\uff0c\u5982\u679c\u4e00\u4e2a custom element \u60f3\u8981\u5728\u00a0connectedCallback<\/code>\u00a0\u5185\u8bbf\u95ee\u00a0innerHTML<\/code>\uff0c\u5b83\u4ec0\u4e48\u4e5f\u62ff\u4e0d\u5230:<\/p>\n
    <script>\ncustomElements.define('user-info', class extends HTMLElement {\n\n  connectedCallback() {\n    alert(this.innerHTML); \/\/ empty (*)\n  }\n\n});\n<\/script>\n\n<user-info>John<\/user-info>\n<\/code><\/pre>\n
    \u5982\u679c\u4f60\u8fd0\u884c\u4e0a\u9762\u7684\u4ee3\u7801\uff0calert<\/code>\u00a0\u51fa\u6765\u7684\u5185\u5bb9\u662f\u7a7a\u7684\u3002
    \n\u8fd9\u6b63\u662f\u56e0\u4e3a\u5728\u90a3\u4e2a\u9636\u6bb5\uff0c\u5b50\u5143\u7d20\u8fd8\u4e0d\u5b58\u5728\uff0cDOM \u8fd8\u6ca1\u6709\u5b8c\u6210\u6784\u5efa\u3002HTML \u89e3\u6790\u5668\u5148\u8fde\u63a5 custom element\u00a0<user-info><\/code>\uff0c\u7136\u540e\u518d\u5904\u7406\u5b50\u5143\u7d20\uff0c\u4f46\u662f\u90a3\u65f6\u5019\u5b50\u5143\u7d20\u8fd8\u5e76\u6ca1\u6709\u52a0\u8f7d\u4e0a\u3002
    \n\u5982\u679c\u6211\u4eec\u8981\u7ed9 custom element \u4f20\u5165\u4fe1\u606f\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5143\u7d20\u5c5e\u6027\u3002\u5b83\u4eec\u662f\u5373\u65f6\u751f\u6548\u7684\u3002
    \n\u6216\u8005\uff0c\u5982\u679c\u6211\u4eec\u9700\u8981\u5b50\u5143\u7d20\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5ef6\u8fdf\u65f6\u95f4\u4e3a\u96f6\u7684\u00a0setTimeout<\/code>\u00a0\u6765\u63a8\u8fdf\u8bbf\u95ee\u5b50\u5143\u7d20\u3002
    \n\u8fd9\u6837\u662f\u53ef\u884c\u7684\uff1a<\/p>\n
    <script>\ncustomElements.define('user-info', class extends HTMLElement {\n\n  connectedCallback() {\n    setTimeout(() => alert(this.innerHTML)); \/\/ John (*)\n  }\n\n});\n<\/script>\n\n<user-info>John<\/user-info>\n<\/code><\/pre>\n
    \u73b0\u5728\u00a0alert<\/code>\u00a0\u5728\u00a0(*)<\/code>\u00a0\u884c\u5c55\u793a\u4e86 \u300cJohn\u300d\uff0c\u56e0\u4e3a\u6211\u4eec\u662f\u5728 HTML \u89e3\u6790\u5b8c\u6210\u4e4b\u540e\uff0c\u624d\u5f02\u6b65\u6267\u884c\u4e86\u8fd9\u6bb5\u7a0b\u5e8f\u3002\u6211\u4eec\u5728\u8fd9\u4e2a\u65f6\u5019\u5904\u7406\u5fc5\u8981\u7684\u5b50\u5143\u7d20\u5e76\u4e14\u7ed3\u675f\u521d\u59cb\u5316\u8fc7\u7a0b\u3002
    \n\u53e6\u4e00\u65b9\u9762\uff0c\u8fd9\u4e2a\u65b9\u6848\u5e76\u4e0d\u662f\u5b8c\u7f8e\u7684\u3002\u5982\u679c\u5d4c\u5957\u7684 custom element \u540c\u6837\u4f7f\u7528\u4e86\u00a0setTimeout<\/code>\u00a0\u6765\u521d\u59cb\u5316\u81ea\u8eab\uff0c\u90a3\u4e48\u5b83\u4eec\u4f1a\u6309\u7167\u5148\u540e\u987a\u5e8f\u6267\u884c\uff1a\u5916\u5c42\u7684\u00a0setTimeout<\/code>\u00a0\u9996\u5148\u89e6\u53d1\uff0c\u7136\u540e\u624d\u662f\u5185\u5c42\u7684\u3002
    \n\u8fd9\u6837\u5916\u5c42\u5143\u7d20\u8fd8\u662f\u65e9\u4e8e\u5185\u5c42\u5143\u7d20\u7ed3\u675f\u521d\u59cb\u5316\u3002<\/p>\n
    <script>\ncustomElements.define('user-info', class extends HTMLElement {\n  connectedCallback() {\n    alert(`${this.id} \u5df2\u8fde\u63a5\u3002`);\n    setTimeout(() => alert(`${this.id} \u521d\u59cb\u5316\u5b8c\u6210\u3002`));\n  }\n});\n<\/script>\n\n<user-info id="outer">\n  <user-info id="inner"><\/user-info>\n<\/user-info>\n<\/code><\/pre>\n
    \u8f93\u51fa\u987a\u5e8f\uff1a<\/p>\n
      \n
    1. outer \u5df2\u8fde\u63a5\u3002<\/li>\n
    2. inner \u5df2\u8fde\u63a5\u3002<\/li>\n
    3. outer \u521d\u59cb\u5316\u5b8c\u6210\u3002<\/li>\n
    4. inner \u521d\u59cb\u5316\u5b8c\u6210\u3002
      \n\u6211\u4eec\u53ef\u4ee5\u5f88\u660e\u663e\u5730\u770b\u5230\u5916\u5c42\u5143\u7d20\u5e76\u6ca1\u6709\u7b49\u5f85\u5185\u5c42\u5143\u7d20\u3002
      \n\u5e76\u6ca1\u6709\u4efb\u4f55\u5185\u5efa\u7684\u56de\u8c03\u65b9\u6cd5\u53ef\u4ee5\u5728\u5d4c\u5957\u5143\u7d20\u6e32\u67d3\u597d\u4e4b\u540e\u901a\u77e5\u6211\u4eec\u3002\u4f46\u6211\u4eec\u53ef\u4ee5\u81ea\u5df1\u5b9e\u73b0\u8fd9\u6837\u7684\u56de\u8c03\u3002\u6bd4\u5982\uff0c\u5185\u5c42\u5143\u7d20\u53ef\u4ee5\u5206\u6d3e\u50cf\u00a0initialized<\/code>\u00a0\u8fd9\u6837\u7684\u4e8b\u4ef6\uff0c\u540c\u65f6\u5916\u5c42\u7684\u5143\u7d20\u76d1\u542c\u8fd9\u6837\u7684\u4e8b\u4ef6\u5e76\u505a\u51fa\u54cd\u5e94\u3002<\/li>\n<\/ol>\n
      Customized built-in elements<\/h2>\n
      \u6211\u4eec\u521b\u5efa\u7684\u00a0<time-formatted><\/code>\u00a0\u8fd9\u4e9b\u65b0\u5143\u7d20\uff0c\u5e76\u6ca1\u6709\u4efb\u4f55\u76f8\u5173\u7684\u8bed\u4e49\u3002\u641c\u7d22\u5f15\u64ce\u5e76\u4e0d\u77e5\u6653\u5b83\u4eec\u7684\u5b58\u5728\uff0c\u540c\u65f6\u65e0\u969c\u788d\u8bbe\u5907\u4e5f\u65e0\u6cd5\u5904\u7406\u5b83\u4eec\u3002
      \n\u4f46\u4e0a\u8ff0\u4e24\u70b9\u540c\u6837\u662f\u975e\u5e38\u91cd\u8981\u7684\u3002\u6bd4\u5982\uff0c\u641c\u7d22\u5f15\u64ce\u4f1a\u5bf9\u8fd9\u4e9b\u4e8b\u60c5\u611f\u5174\u8da3\uff0c\u6bd4\u5982\u6211\u4eec\u771f\u7684\u5c55\u793a\u4e86\u65f6\u95f4\u3002\u6216\u8005\u5982\u679c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u7279\u522b\u7684\u6309\u94ae\uff0c\u4e3a\u4ec0\u4e48\u4e0d\u590d\u7528\u5df2\u6709\u7684\u00a0<button><\/code>\u00a0\u529f\u80fd\u5462\uff1f
      \n\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u7ee7\u627f\u5185\u5efa\u5143\u7d20\u7684\u7c7b\u6765\u6269\u5c55\u548c\u5b9a\u5236\u5b83\u4eec\u3002
      \n\u6bd4\u5982\uff0c\u6309\u94ae\u662f\u00a0HTMLButtonElement<\/code>\u00a0\u7684\u5b9e\u4f8b\uff0c\u8ba9\u6211\u4eec\u5728\u8fd9\u4e2a\u57fa\u7840\u4e0a\u521b\u5efa\u5143\u7d20\u3002<\/p>\n
        \n
      1. \u6211\u4eec\u7684\u7c7b\u7ee7\u627f\u81ea\u00a0HTMLButtonElement<\/code>\uff1a<\/li>\n<\/ol>\n
        class HelloButton extends HTMLButtonElement { \/* custom element \u65b9\u6cd5 *\/ }\n<\/code><\/pre>\n
          \n
        1. \u7ed9\u00a0customElements.define<\/code>\u00a0\u63d0\u4f9b\u5b9a\u4e49\u6807\u7b7e\u7684\u7b2c\u4e09\u4e2a\u53c2\u6570\uff1a<\/li>\n<\/ol>\n
          customElements.define('hello-button', HelloButton, {extends: 'button'});\n<\/code><\/pre>\n
          \u8fd9\u4e00\u6b65\u662f\u5fc5\u8981\u7684\uff0c\u56e0\u4e3a\u4e0d\u540c\u7684\u6807\u7b7e\u4f1a\u5171\u4eab\u540c\u4e00\u4e2a\u7c7b\u3002
          \n3. \u6700\u540e\uff0c\u63d2\u5165\u4e00\u4e2a\u666e\u901a\u7684\u00a0<button><\/code>\u00a0\u6807\u7b7e\uff0c\u4f46\u6dfb\u52a0\u00a0is="hello-button"<\/code>\u00a0\u5230\u8fd9\u4e2a\u5143\u7d20\uff0c\u8fd9\u6837\u5c31\u53ef\u4ee5\u4f7f\u7528\u6211\u4eec\u7684 custom element\uff1a<\/p>\n
          <button is="hello-button">...<\/button>\n<\/code><\/pre>\n
          \u4e0b\u9762\u662f\u4e00\u4e2a\u5b8c\u6574\u7684\u4f8b\u5b50\uff1a<\/p>\n
          <script>\n\/\/ \u8fd9\u4e2a\u6309\u94ae\u5728\u88ab\u70b9\u51fb\u7684\u65f6\u5019\u8bf4 "hello"\nclass HelloButton extends HTMLButtonElement {\n  constructor() {\n    super();\n    this.addEventListener('click', () => alert("Hello!"));\n  }\n}\n\ncustomElements.define('hello-button', HelloButton, {extends: 'button'});\n<\/script>\n\n<button is="hello-button">Click me<\/button>\n\n<button is="hello-button" disabled>Disabled<\/button>\n<\/code><\/pre>\n
          MORE<\/h2>\n