Блог

В «обычном» svelte вы можете использовать глобальный модификатор, но как это сделать, если вы используете веб-компонент?

 <script lang="ts">
  import MyLogo from "./assets/icons/logo.svg"
</script>

<MyLogo class="my-logo" viewBox="0 0 114 49"/>

<style lang="scss">
:global(.my-logo) {
  ...
}
</style>
  

Вам придется использовать пользовательские свойства CSS:

 <script>
  import MyLogo from "./assets/icons/logo.svg"
</script>

<div style="display: contents; --logo-color: blue">
  <MyLogo class="my-logo" viewBox="0 0 114 49"/>
</div>
  

 <!-- logo.svg -->
<svg>
  <text style="fill: var(--logo-color)">my logo</text>
</svg>