如何从后端生成HTML+jQuery的传统项目渐进式迁移到Svelte？

以下是3种可直接落地的实现方案，均无需为组件单独拆分专属样式：

方案1：禁用自定义元素Shadow DOM（最推荐） #

直接关闭Svelte自定义元素的Shadow DOM隔离特性，即可让全局旧样式直接作用于组件内部：

• 只需在Svelte组件头部添加配置即可：

<svelte:options customElement={true} shadow="none" />

• 特性说明：组件内容会直接挂载到自定义元素节点下，无DOM隔离，旧项目全局样式完全生效，迁移阶段无需对样式做任何调整。全量迁移完成后可根据需求再开启Shadow DOM或使用Svelte原生scoped样式做隔离。

方案2：全局样式注入Shadow DOM（需保留隔离场景） #

如果必须保留Shadow DOM的隔离能力，可通过动态注入的方式复用旧项目全局样式构建产物：

• 在Svelte组件的生命周期中插入全局样式链接：

import { onMount } from 'svelte';

onMount(() => {
  const shadowRoot = document.currentScript.getRootNode();
  const globalStyle = document.createElement('link');
  globalStyle.rel = 'stylesheet';
  // 填写旧项目构建后的全局样式产物路径即可
  globalStyle.href = '/assets/legacy-global.min.css';
  shadowRoot.appendChild(globalStyle);
});

• 特性说明：所有组件复用同一份全局样式缓存，无重复打包体积问题，同时保留Shadow DOM的隔离特性，组件内部样式不会泄露到全局。

方案3：直接挂载Svelte组件到现有DOM（无需自定义元素） #

如果不需要封装为通用自定义元素，可采用更轻量的挂载方式，天然无样式隔离问题：

• 在旧页面预留挂载节点：

<!-- 原有页面中需要替换为Svelte组件的模块位置 -->
<div id="svelte-order-module"></div>

• 编写Svelte组件挂载逻辑：

import OrderModule from './components/OrderModule.svelte';

// 直接挂载到预留节点
new OrderModule({
  target: document.getElementById('svelte-order-module'),
  // 可直接传入旧页面中获取的动态数据作为props
  props: { orderId: window.currentOrderId }
});

• 特性说明：完全兼容现有项目的全局变量、jQuery方法和样式体系，替换粒度可控，适合绝大多数渐进式迁移场景。

内容的提问来源于stack exchange，提问作者Sergey Fedorov