Svelte Web components - Styling Slotted HTML tags

0
votes

Is there a way to include slotted html tag inside shadow root? Default slotted tags are rendered outside Shadow Root while there is a reference to them inside it. My goal is to use customElement scoped style ( alert.css ) to style also slotted tags.

index.html

<custom-alert types="col-5 btn-default" name="alert">
    <h3 slot="slotname">I'm not blue :(</h3>
    <p slot="slotname">Nullam pretium neque a risus tincidunt, et semper augue.</p>
</custom-alert>

alert.svelte

<style>
    @import "../css/alert.css";
</style>

<div class="alert">
    <div>
        <slot name="slotname"></slot>
        <h3>Yes I'm Blue :)</h3>
    </div>
    <i class="bi bi-x" data-bs-dismiss="alert" aria-label="Close" role="button"></i>
</div>
1
web-componentsvelte

1 Answers

0
votes

You can style child components in the parent. This also works for slots. This can be achieved like this (In the example spans inside the slot are styled to have white text color):

<style>
  .parent {
    width: 50px;
    background-color: red;
    height: 50px;
  }
  
  .parent :global(span) {
    color: white;
  }
</style>

<div class="parent">
  <slot/>
</div>

You can play around with this example in the REPL: https://svelte.dev/repl/98d2511bf24c41758b5d4520e000a74d?version=3.37.0