Web Components 是浏览器原生支持的。详细见 MDN

三个核心概念：

1. Custom Elements（自定义元素）：
   1. 可以创建自己的 HTML 标签，类似 <my-component>，并且定义其行为和生命周期函数。
   2. 相关生命周期回调包括 connectedCallback、disconnectedCallback、attributeChangedCallback等
2. Shadow DOM（影子 DOM）：
   1. 提供了 DOM 和 CSS 的封装，防止组件内部的样式和结构影响到外部
   2. 使组件更具可复用性，避免了样式污染
3. HTML Templates（HTML 模板）：
   1. 通过 <template> 和 <slot> 元素，可以创建可复用的结构和内容插槽
   2. <template> 中的内容不会立即渲染，只有在 JS 中手动克隆和插入到 DOM 时才会渲染

create-docusaurus是一个创建 Docusaurus 应用的脚手架工具。

初始化项目：

npx create-docusaurus@latest my-website classic --typescript --package-manager pnpm

• 项目名：my-website
• 模板：classic
• 使用 typescript
• 使用 pnpm

如果查看 tsconfig.json 或者执行pnpm typecheck报错，安装以下依赖：

pnpm add -D @docusaurus/theme-classic @types/node

文件类型：img、docx、xlsx、ppt、pdf、md、txt、audio、video

网页渲染方式主要有：

• 客户端渲染（Client Side Rendering）
• 服务端渲染（Server Side Rendering）
• 静态站点生成（Static Site Generation）