如何阻止Svelte自动添加随机类名？

• 用:global()标记目标样式
  如果你想让Shadow Root及其子元素的样式跳过Svelte的作用域哈希处理，直接在组件样式里用:global()包裹对应的选择器就行。这样Svelte不会给这些元素附加随机类名，样式会直接作用到目标元素上。
  示例代码：

  <style>
    :global(#your-shadow-root-id) {
      /* 该元素样式不会被添加哈希类名 */
    }
    :global(#your-shadow-root-id .child-element) {
      /* 子元素样式同样不受哈希处理影响 */
    }
  </style>
  

• 手动创建Shadow Root并独立注入样式
  如果是通过JS手动创建Shadow Root，创建时指定mode: 'open'，然后直接在Shadow内部插入未被Svelte处理的样式。这种方式下，Svelte的作用域样式不会渗透到Shadow Root里，自然不会给内部元素加随机类名。
  示例代码：

  const shadowHost = document.getElementById('your-shadow-host');
  const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
  
  // 直接给Shadow Root添加样式
  const style = document.createElement('style');
  style.textContent = `
    .child-element {
      color: #333;
    }
  `;
  shadowRoot.appendChild(style);
  

• 全局配置跳过特定组件的哈希生成
  在svelte.config.js里通过compilerOptions.cssHash自定义哈希规则，判断目标组件并跳过哈希生成。这种方法适合需要全局控制的场景，注意要准确识别目标组件，避免影响其他组件的样式隔离。
  示例配置：

  import adapter from '@sveltejs/adapter-auto';
  
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
    kit: {
      adapter: adapter()
    },
    compilerOptions: {
      cssHash: ({ hash, css, name, filename }) => {
        // 根据组件文件名判断是否跳过哈希
        if (filename.includes('YourShadowComponent.svelte')) {
          return ''; // 不生成哈希类名
        }
        // 其他组件保持默认哈希规则
        return `svelte-${hash(css)}`;
      }
    }
  };
  
  export default config;
  

内容的提问来源于stack exchange，提问作者Abhay Salvi