Svelte中如何利用Shadow DOM实现组件样式隔离

在Svelte中，可以通过将<style>标签放置在组件内部来利用Shadow DOM实现组件样式隔离。当Svelte编译器遇到<style>标签时，它会自动将样式应用到组件的Shadow DOM中，从而确保样式只会影响到当前组件，而不会泄漏到其他组件。

下面是一个简单的例子，演示了如何在Svelte组件中使用Shadow DOM实现样式隔离：

<!-- Button.svelte -->
<script>
  export let text;
</script>

<style>
  button {
    background-color: lightblue;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
  }
</style>

<button>{text}</button>

在上面的例子中，<style>标签内的样式只会影响到<button>元素，而不会影响到其他组件中的元素。这样可以确保组件样式的隔离性，避免样式冲突和污染。