{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/ecosystem/web-components","result":{"data":{"current":{"frontmatter":{"title":"Web components 适配","order":14,"brief":"Best practices for using Semi UI in web components","icon":"doc-webcomponents"},"fields":{"type":"ecosystem"},"tableOfContents":{"items":[{"url":"#问题","title":"问题"},{"url":"#建议使用方式","title":"建议使用方式","items":[{"url":"#semi-版本要求","title":"Semi 版本要求"},{"url":"#使用插件完成样式插入","title":"使用插件完成样式插入","items":[{"url":"#配置详情","title":"配置详情"},{"url":"#原理","title":"原理"}]}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"category\": \"生态与帮助\",\n  \"title\": \"Web components 适配\",\n  \"icon\": \"doc-webcomponents\",\n  \"localeCode\": \"zh-CN\",\n  \"order\": 14,\n  \"brief\": \"Best practices for using Semi UI in web components\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Web_components\"\n  }, \"Web components\"), \" \\u662F\\u4E00\\u5957\\u7528\\u4E8E\\u521B\\u5EFA\\u53EF\\u91CD\\u7528\\u81EA\\u5B9A\\u4E49\\u5143\\u7D20\\u7684\\u6280\\u672F\\uFF0C\\u53EF\\u5B9E\\u73B0\\u8DE8\\u6D4F\\u89C8\\u5668\\u548C\\u6846\\u67B6\\u517C\\u5BB9\\uFF0C\\u5177\\u5907\\u826F\\u597D\\u7684\\u5C01\\u88C5\\u6027\\u548C\\u53EF\\u91CD\\u7528\\u6027\\uFF0C\\u88AB\\u5E7F\\u6CDB\\u5E94\\u7528\\u4E8E\\u5F00\\u53D1\\u6D4F\\u89C8\\u5668\\u63D2\\u4EF6\\u3001\\u8DE8\\u6846\\u67B6\\u7684\\u7EC4\\u4EF6\\u4E2D\\u3002\"), mdx(\"p\", null, \"\\u501F\\u52A9\\u7EC4\\u4EF6\\u5E93\\u53EF\\u5B9E\\u73B0\\u66F4\\u9AD8\\u6548\\u7684\\u81EA\\u5B9A\\u4E49\\u5143\\u7D20\\u5F00\\u53D1\\uFF0C\\u4F46\\u662F web components \\u4E2D\\u7684 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM\"\n  }, \"shadow DOM\"), \" \\u6280\\u672F\\u5177\\u5907\\u7684\", mdx(\"strong\", null, \"\\u6837\\u5F0F\\u9694\\u79BB\"), \"\\u548C \", mdx(\"strong\", null, \"DOM \\u5C01\\u88C5\"), \"\\u7279\\u6027\\u4F1A\\u7ED9\\u7EC4\\u4EF6\\u5E93\\u7EC4\\u4EF6\\u7684\\u4F7F\\u7528\\u5E26\\u6765\\u4E00\\u4E9B\\u95EE\\u9898\\u3002\\u5927\\u591A\\u6570\\u7EC4\\u4EF6\\u5E93\\u5982\\u679C\\u4E0D\\u505A\\u989D\\u5916\\u9002\\u914D\\uFF0C\\u90FD\\u65E0\\u6CD5\\u6B63\\u5E38\\u5728 shadow DOM \\u5185\\u6B63\\u5E38\\u5DE5\\u4F5C\\uFF0C\\u4E00\\u822C\\u6765\\u8BF4\\u4F1A\\u5B58\\u5728\\u4EE5\\u4E0B\\u95EE\\u9898\\uFF1A\"), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u95EE\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" 1. \\u7EC4\\u4EF6\\u6837\\u5F0F\\u4E0D\\u751F\\u6548 \")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u666E\\u901A\\u7684\\u7F16\\u8BD1\\u6D41\\u7A0B\\u4E2D\\uFF0C\\u7EC4\\u4EF6\\u5E93\\u7684\\u7EC4\\u4EF6\\u6837\\u5F0F\\u4FE1\\u606F\\u5728\\u7F16\\u8BD1\\u540E\\u4F1A\\u51FA\\u73B0\\u5728 head \\u90E8\\u5206 \\u7684 style \\u6807\\u7B7E\\u5185\\uFF0C\\u6216\\u8005 link \\u6807\\u7B7E href \\u6307\\u5B9A\\u7684\\u6587\\u4EF6\\u4E2D\\u3002\\u7531\\u4E8E\\u6837\\u5F0F\\u9694\\u79BB\\u7684\\u673A\\u5236\\uFF0C\\u6837\\u5F0F\\u65E0\\u6CD5\\u7A7F\\u8FC7 shadow DOM \\u8FB9\\u754C\\uFF0C\\u56E0\\u6B64\\u65E0\\u6CD5\\u5728 shadow DOM \\u5185\\u90E8\\u751F\\u6548\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" 2. Css variable \\u4E0D\\u751F\\u6548 \")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u73B0\\u4EE3\\u5316\\u7684 UI \\u7EC4\\u4EF6\\u5E93\\uFF0C\\u4E3A\\u5B9E\\u73B0\\u4E3B\\u9898\\u5B9A\\u5236\\uFF0C\\u5927\\u591A\\u90FD\\u4F1A\\u501F\\u52A9 css variable \\u505A design token \\u7684\\u58F0\\u660E\\uFF0C\\u4E3A\\u4E86\\u80FD\\u5168\\u5C40\\u751F\\u6548\\uFF0C\\u907F\\u514D\\u91CD\\u590D\\u58F0\\u660E\\uFF0C\\u8FD9\\u4E9B css token \\u5F80\\u5F80\\u90FD\\u662F\\u6302\\u8F7D\\u5728\\u6839\\u8282\\u70B9\\u4E0B\\u7684\\uFF0C\\u4F8B\\u5982 html \\u6216 body\\u3002Semi \\u4E5F\\u662F\\u91C7\\u53D6\\u7684\\u6B64\\u65B9\\u5F0F\\u5B9E\\u73B0\\u4E3B\\u9898\\u5B9A\\u5236\\u3002\", mdx(\"br\", null), \"\\n\\u5C06\\u6837\\u5F0F\\u4FE1\\u606F\\u63D2\\u5165\\u5230 shadow DOM \\u53EF\\u4EE5\\u89E3\\u51B3\\u95EE\\u98981\\uFF0C\\u4F7F\\u5F97\\u7EC4\\u4EF6\\u4E0A\\u7684\\u6837\\u5F0F\\u7C7B\\u540D\\u751F\\u6548\\uFF0C\\u4F46\\u7531\\u4E8E shadow DOM \\u4E2D\\u65E0 body \\u6216\\u8005 html\\uFF0Ccss variable \\u65E0\\u6CD5\\u751F\\u6548\\uFF0C\\u7EC4\\u4EF6\\u6837\\u5F0F\\u4ECD\\u4E0D\\u7B26\\u5408\\u9884\\u671F\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" 3. \\u5F39\\u51FA\\u5C42\\u7EC4\\u4EF6\\u5173\\u95ED\\u884C\\u4E3A\\u5F02\\u5E38 \")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u5F39\\u51FA\\u5C42\\u7EC4\\u4EF6\\uFF08\\u5982Tooltip\\u3001Select\\u3001Dropdown \\u7B49\\uFF09\\uFF0C\\u5728\\u524D\\u7AEF\\u7EC4\\u4EF6\\u5E93\\u4E2D\\u5E38\\u7528\\u7684\\u573A\\u666F\\u662F\\u901A\\u8FC7\\u70B9\\u51FB\\u89E6\\u53D1\\u5F39\\u51FA\\u5C42\\u7684\\u6253\\u5F00\\u548C\\u5173\\u95ED\\u3002\\u524D\\u7AEF\\u7EC4\\u4EF6\\u5E93\\u5E38\\u7528\\u7684\\u65B9\\u6848\\u662F\\u5728\\u5F39\\u51FA\\u5C42\\u6253\\u5F00\\u540E\\uFF0C\\u5C06\\u70B9\\u51FB\\u4E8B\\u4EF6\\u59D4\\u6258\\u5230 document \\u4E0A\\uFF0C\\u4EE5\\u7528\\u4E8E\\u76D1\\u542C\\u7528\\u6237\\u662F\\u5426\\u70B9\\u51FB\\u5F39\\u51FA\\u5C42\\u7EC4\\u4EF6\\u5916\\u7684\\u5176\\u4ED6\\u9875\\u9762\\u5143\\u7D20\\u6765\\u5173\\u95ED\\u5F39\\u51FA\\u5C42\\u3002\", mdx(\"br\", null), \"\\n\\u5728 shadow DOM \\u4E2D\\u89E6\\u53D1\\u7684\\u4E8B\\u4EF6\\u4F20\\u9012\\u5230 shadow DOM \\u5916\\u65F6\\uFF0C\\u7531\\u4E8E DOM \\u9694\\u79BB\\uFF0C\\u65E0\\u6CD5\\u901A\\u8FC7\\u4E8B\\u4EF6 Event \\u7684 target API \\u62FF\\u5230\\u6B63\\u786E\\u7684\\u4E8B\\u4EF6\\u89E6\\u53D1\\u5BF9\\u8C61\\u3002\", mdx(\"br\", null), \"\\n\\u5F53\\u70B9\\u51FB\\u884C\\u4E3A\\u53D1\\u751F\\u5728 shadow DOM \\u5185\\uFF0C\\u5728 document \\u4E0A\\u7684\\u4E8B\\u4EF6 Event \\u62FF\\u5230\\u7684 target \\u662F shadow host\\uFF08shadow DOM \\u6240\\u6302\\u8F7D\\u7684\\u8282\\u70B9\\uFF09\\uFF0C\\u4E0D\\u662F\\u4E8B\\u4EF6\\u5B9E\\u9645\\u89E6\\u53D1\\u5143\\u7D20\\uFF0C\\u5F80\\u5F80\\u4F1A\\u5BFC\\u81F4\\u5F39\\u51FA\\u5C42\\u7EC4\\u4EF6\\u5173\\u95ED\\u884C\\u4E3A\\u5F02\\u5E38\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5EFA\\u8BAE\\u4F7F\\u7528\\u65B9\\u5F0F\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Semi \\u7248\\u672C\\u8981\\u6C42\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9488\\u5BF9\\u4E0A\\u8FF0\\u666E\\u904D\\u5B58\\u5728\\u7684\\u95EE\\u9898\\uFF0CSemi UI \\u5DF2\\u7ECF\\u505A\\u4E86\\u9002\\u914D\\u6539\\u9020\\uFF0C \\u65E0\\u9700\\u989D\\u5916\\u5F00\\u53D1\\u6210\\u672C\\u3002\\u5982\\u679C\\u4F60\\u9700\\u8981 shadow DOM \\u4E0E Semi UI \\u642D\\u914D\\u4F7F\\u7528\\u3002\\u6211\\u4EEC\\u5EFA\\u8BAE\\u4F60\\u5347\\u7EA7\\u5230\", mdx(\"strong\", null, \" v2.59.0 \\u7248\\u672C\\u53CA\\u4EE5\\u4E0A\"), \"\\uFF0C\\u5E76\\u4E14\\u53C2\\u8003\\u4E0B\\u65B9\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6%E5%AE%8C%E6%88%90%E6%A0%B7%E5%BC%8F%E6%8F%92%E5%85%A5\"\n  }, \"\\u4F7F\\u7528\\u63D2\\u4EF6\\u5B8C\\u6210\\u6837\\u5F0F\\u63D2\\u5165\"), \"\\u7AE0\\u8282\\uFF0C\\u6309\\u9700\\u5F00\\u542F\\u7F16\\u8BD1\\u914D\\u7F6E\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u63D2\\u4EF6\\u5B8C\\u6210\\u6837\\u5F0F\\u63D2\\u5165\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u914D\\u7F6E\\u8BE6\\u60C5\"), mdx(Notice, {\n    mdxType: \"Notice\"\n  }, \"\\u6211\\u4EEC\\u5EFA\\u8BAE\\u901A\\u8FC7 npm \\u7BA1\\u7406\\u4F9D\\u8D56\\u5305\\uFF0C\\u5982\\u679C\\u4F7F\\u7528 yarn/pnpm \\u7BA1\\u7406\\u4F9D\\u8D56\\u5305\\uFF0C\\u9700\\u8981\\u5728\\u901A\\u8FC7 resolve.alias \\u6307\\u5B9A @douyinfe/semi-ui\\uFF0C @douyinfe/semi-icons\\uFF0C@douyinfe/semi-foundation \\u7684\\u5B9E\\u9645\\u8DEF\\u5F84\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" 1.\\u5F00\\u542F Semi \\u63D2\\u4EF6\\uFF08>= 2.59.0) \")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\uFF08\\u5B57\\u8282\\u8DF3\\u52A8\\u7528\\u6237\\uFF0C\\u82E5\\u4F7F\\u7528\\u7684\\u662F\\u516C\\u53F8\\u5185\\u90E8\\u76F8\\u5173\\u5DE5\\u7A0B\\u5316\\u65B9\\u6848\\uFF0C\\u914D\\u7F6E\\u8BF7\\u67E5\\u9605\\u98DE\\u4E66\\u6587\\u6863\\uFF1A\", mdx(\"a\", {\n    href: \"https://bytedance.larkoffice.com/docx/PqMwd7lFko6ECTxmmcFcnWIQnmg\",\n    target: \"_blank\"\n  }, \"\\u63D2\\u4EF6\\u914D\\u7F6E\"), \"\\uFF09\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"webpack \\u9879\\u76EE\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"yarn add -D @douyinfe/semi-webpack-plugin\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Rspack \\u9879\\u76EE\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"yarn add -D @douyinfe/semi-rspack-plugin\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" 2. \\u5728\\u9879\\u76EE\\u7684\\u914D\\u7F6E\\u6587\\u4EF6\\uFF08webpack.config.js \\u7B49\\uFF09\\u5F15\\u5165 Semi webpack \\u63D2\\u4EF6\\uFF0C\\u914D\\u7F6E webComponentPath \\u53C2\\u6570\\uFF1B\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// webComponentPath\\uFF1A\\u6307\\u5B9A\\u9700\\u8981\\u63D2\\u5165\\u6837\\u5F0F\\u7684 shadow DOM \\u7684\\u8DEF\\u5F84\\n// 1. \\u652F\\u6301 Boolean \\u7C7B\\u578B\\uFF0C\\u4F20\\u5165 true\\uFF0C\\u4E3A\\u9ED8\\u8BA4\\u8DEF\\u5F84 src/*\\n// 2. \\u652F\\u6301 RegExp \\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\uFF0C\\u901A\\u8FC7\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\u5339\\u914D\\u8DEF\\u5F84\\nwebComponentPath: Boolean | RegExp;\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E3E\\u4E2A \\uD83C\\uDF30\\uFF0C\\u5982\\u679C shadow DOM \\u5728\\u8DEF\\u5F84 src/components \\u4E0B\\uFF0C\\u5219\\u8FDB\\u884C\\u5982\\u4E0B\\u914D\\u7F6E\\uFF1A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E wepack \\u9879\\u76EE\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"//\\u914D\\u7F6E\\u6587\\u4EF6\\uFF1A\\u5982 webpack.config.js\\nconst SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;\\n\\nmodule.exports = {\\n    /*...other settings */\\n    plugin: [\\n        /*...other plugins */\\n        new SemiPlugin({\\n            webComponentPath: /\\\\(src\\\\/components\\\\)/\\n        }),\\n    ]\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E rspack \\u9879\\u76EE\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"//rspack \\u9879\\u76EE\\u914D\\u7F6E\\u6587\\u4EF6\\uFF1A\\u5982 rsbuild.config.mjs\\nimport { defineConfig } from '@rsbuild/core';\\nconst RspackPlugin = require('@douyinfe/semi-rspack-plugin').SemiRspackPlugin;\\n\\nexport default defineConfig({\\n  /*...other settings */\\n  tools: {\\n    rspack: (config, { addRules }) => {\\n      config.module?.rules?.forEach((rule) => {\\n        if ((rule?.test)?.toString() === '/\\\\\\\\.s(?:a|c)ss$/' ) {\\n          rule['exclude'] = /@douyinfe\\\\/semi-(ui|icons|foundation)\\\\/lib\\\\/.+\\\\.scss$/;\\n        }\\n      });\\n\\n      config.plugins.push(new RspackPlugin({\\n        webComponentPath: true,\\n      }));\\n    }\\n  } \\n  /*...other settings */\\n});\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" 3. \\u5728\\u9700\\u8981\\u63D2\\u5165\\u6837\\u5F0F\\u7684 shadow DOM \\u7684\\u4EE3\\u7801\\u4E2D\\uFF0C\\u8C03\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"importSemiComponentStyle\"), \" \\u51FD\\u6570 \")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"function importSemiComponentStyle(\\n    // \\u9700\\u8981\\u63D2\\u5165\\u6837\\u5F0F\\u7684\\u7EC4\\u4EF6\\u5B57\\u7B26\\u4E32\\uFF0C\\u56FA\\u5B9A\\u683C\\u5F0F\\n    // \\u5F00\\u5934\\u4E3A SEMI_INSERT_STYLE_BEGIN\\n    // \\u7ED3\\u675F\\u4E3A SEMI_INSERT_STYLE_END\\n    // \\u4E2D\\u95F4\\u4E3A\\u7EC4\\u4EF6\\u6570\\u7EC4\\uFF0C\\n    insertComponentStr: string,\\n    // \\u6837\\u5F0F\\u63D2\\u5165\\u4F4D\\u7F6E\\u7684 shadow root\\n    root: ShadowRoot,\\n    // \\u56DE\\u8C03\\u51FD\\u6570\\n    cb?: function,\\n)\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E3E\\u4E2A \\uD83C\\uDF30\\uFF0C\\u5982\\u679C\\u5728 shadow DOM \\u4E2D\\u7528\\u5230\\u4E86 Button\\uFF0CSelect \\u7EC4\\u4EF6\\uFF0C\\u5219\\u6309\\u7167\\u5982\\u4E0B\\u65B9\\u5F0F\\u8FDB\\u884C\\u914D\\u7F6E\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// src/components/index.js\\nclass TestShadowDom extends HTMLElement {\\n  constructor() {\\n    super();\\n    this.attachShadow({ mode: \\\"open\\\" });\\n  }\\n  connectedCallback() {\\n    const root = this.shadowRoot;\\n       \\n    // ts \\u9879\\u76EE\\u4E2D\\u9700\\u4F7F\\u7528 @ts-ignore \\u5FFD\\u7565 importSemiComponentStyle \\u62A5\\u9519\\n    // Semi \\u63D2\\u4EF6\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\u5C06\\u89E3\\u6790\\u4EE5\\u4E0B\\u8BED\\u53E5\\uFF0C\\u5C06 importSemiComponentStyle \\u51FD\\u6570\\u5177\\u4F53\\u5B9E\\u73B0\\u63D2\\u5165\\u5230\\u8BE5\\u6587\\u4EF6\\u4E2D\\n    importSemiComponentStyle(\\n          'SEMI_INSERT_STYLE_BEGIN[\\\"Button\\\", \\\"Select\\\"]SEMI_INSERT_STYLE_END',\\n          root,\\n          () => {}\\n    );\\n    const container = document.createElement('div');\\n    root?.appendChild(container);\\n\\n    ReactDOM.render(<SemiComponent />, container);\\n  }\\n}\\n\\ncustomElements.define(\\\"test-shadow-dom\\\", TestShadowDom);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u539F\\u7406\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u63D2\\u4EF6\\u8FD0\\u884C\\u539F\\u7406\\u5982\\u4E0B\\uFF1A\"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728\\u4EE3\\u7801\\u7F16\\u8BD1\\u9636\\u6BB5\\uFF0C\\u63D2\\u4EF6\\u6839\\u636E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"webComponentPath\"), \" \\u914D\\u7F6E\\u7684\\u8DEF\\u5F84\\uFF0C\\u5224\\u65AD\\u8BE5\\u8DEF\\u5F84\\u4E0B\\u7684\\u4EE3\\u7801\\u4E0B\\u662F\\u5426\\u8C03\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"importSemiComponentStyle\"), \"\\uFF1B\\u5982\\u65E0\\uFF0C\\u5219\\u4E0D\\u505A\\u4EFB\\u4F55\\u64CD\\u4F5C\\uFF0C\\u82E5\\u6709\\uFF0C\\u5219\\u6267\\u884C\\u4E0B\\u65B9\\u6B65\\u9AA4\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u63D2\\u4EF6\\u6839\\u636E\\u51FD\\u6570\\u53C2\\u6570\\u62FF\\u5230\\u9700\\u8981\\u63D2\\u5165\\u6837\\u5F0F\\u7684\\u7EC4\\u4EF6\\u3002\\u63D2\\u4EF6\\u89E3\\u6790\\u8FD9\\u4E9B\\u7EC4\\u4EF6\\u6240\\u4F9D\\u8D56\\u7684\\u6240\\u6709\\u6837\\u5F0F\\u6587\\u4EF6\\uFF08\\u57FA\\u7840\\u6837\\u5F0F\\uFF0C\\u7EC4\\u4EF6\\u6837\\u5F0F\\uFF0C\\u7EC4\\u4EF6\\u4F9D\\u8D56\\u7684\\u5B50\\u7EC4\\u4EF6\\u6837\\u5F0F\\u7B49\\uFF09\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u63D2\\u4EF6\\u5B8C\\u6210\\u5BF9\\u6B64 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"importSemiComponentStyle\"), \" \\u51FD\\u6570\\u7684\\u5B9E\\u73B0\\uFF0C\\u51FD\\u6570\\u4E2D\\u5305\\u542B\\u6240\\u6709\\u6837\\u5F0F\\u6587\\u4EF6\\u63D2\\u5165\\u903B\\u8F91\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u63D2\\u4EF6\\u5C06\\u51FD\\u6570\\u5B9A\\u4E49\\u63D2\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"importSemiComponentStyle\"), \" \\u8C03\\u7528\\u7684\\u6587\\u4EF6\\u4E2D\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E3E\\u4E2A \\uD83C\\uDF30\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u6587\\u4EF6 src/components/index.js\\u4E2D\\uFF0C \\u8C03\\u7528 importSemiComponentStyle\\uFF0C \\u6307\\u5B9A Button \\u7EC4\\u4EF6\\u7684\\u6837\\u5F0F\\u63D2\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// src/components/index.js\\nclass TestShadowDom extends HTMLElement {\\n  constructor() {\\n    super();\\n    this.attachShadow({ mode: \\\"open\\\" });\\n  }\\n  connectedCallback() {\\n    const root = this.shadowRoot;\\n\\n    importSemiComponentStyle(\\n          'SEMI_INSERT_STYLE_BEGIN[\\\"Button\\\"]SEMI_INSERT_STYLE_END',\\n          this.shadowRoot,\\n          () => {}\\n    );\\n    const container = document.createElement('div');\\n    this.shadowRoot?.appendChild(container);\\n\\n    ReactDOM.render(<SemiComponent />, container);\\n  }\\n}\\n\\n\\ncustomElements.define(\\\"test-shadow-dom\\\", TestShadowDom);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u63D2\\u4EF6\\u6839\\u636E\\u4E0A\\u8FF0\\u5B9A\\u4E49\\u751F\\u6210\\u7684 importSemiComponentStyle \\u51FD\\u6570\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"\\nasync function importSemiComponentStyle(componentsStr, root, cb){\\n  const modules = await Promise.all([\\n    // \\u57FA\\u7840\\u6837\\u5F0F\\n    import(\\\"@douyinfe/semi-ui/lib/es/_base/base.scss\\\"),\\n    // \\u4F9D\\u8D56\\u7684\\u7EC4\\u4EF6\\u6837\\u5F0F\\n    import(\\\"@douyinfe/semi-icons/lib/es/styles/icons.scss\\\"),\\n    // \\u7EC4\\u4EF6\\u6837\\u5F0F\\n    import(\\\"@douyinfe/semi-foundation/lib/es/button/button.scss\\\")\\n  ]);\\n  const styleStr = modules.map(module => {\\n    const cssContent = module.default;\\n    return cssContent;\\n  });\\n  styleStr.forEach(css => {\\n    const style = document.createElement('style');\\n    style.innerHTML = css;\\n    root.prepend(style);\\n  });\\n  if(typeof cb === 'function') {\\n    cb();\\n  }\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u63D2\\u4EF6\\u4F1A\\u5C06\\u6B64 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"importSemiComponentStyle\"), \" \\u51FD\\u6570\\u63D2\\u5165\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/components/index.js\"), \" \\u6587\\u4EF6\\u4E2D\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u60F3\\u8981\\u4E86\\u89E3\\u66F4\\u591A\\u7EC6\\u8282\\uFF0C\\u53EF\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://bytedance.larkoffice.com/docx/NtqrdoSrIoXruwxlst3cDzlZn6g\"\n  }, \"Semi \\u7EC4\\u4EF6\\u5E93\\u5982\\u4F55\\u9002\\u914D web components\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/ecosystem/web-components","next":{"fields":{"slug":"en-US/experience/content-guidelines"},"id":"b207ea63-9b05-5890-af9d-7358773df9e5","frontmatter":{"title":"Content Guidelines","localeCode":"en-US","icon":"doc-contentguidelines","showNew":null}},"previous":{"fields":{"slug":"en-US/ecosystem/web-components"},"id":"4ff18775-a290-53ee-aad0-8cfa30823288","frontmatter":{"title":"Web Components","localeCode":"en-US","icon":"doc-webcomponents","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}