Custom HTML tag not picking up css

[ted-dgk]

Describe the bug

I have a custom HTML tag based on some css. Once in a while it seems to work mostly not and not in the small repo. Works in S4 and seemed more consistient in S5 until recently (sorry I can't be more precise). If I look in dev tools the tag is in the html but the css is not there. If I add the css manually, it works.

Reproduction

REPL

<div class="div1">
  <center-table>
    <!-- <div class="center-tbl"> -->
    <div class="div2">
    </div>
  <!-- </div> -->
  </center-table>
</div>

<style>
  .div1 {
    width: 800px;
    height: 50px;
    background-color: aquamarine;
  }

  .div2 {
    width: 100px;
    height: 50px;
    background-color: cornflowerblue;
  }

  .center-tbl {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    overflow-x: auto;
    padding: 0 2px;
  }
  center-table {
    display: flex;
    width: 100%;
    justify-content: center;
  }
</style>

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 16.41 GB / 31.94 GB
  Binaries:
    Node: 20.16.0 - D:\nodejs\node.EXE
    npm: 10.8.2 - D:\nodejs\npm.CMD
  Browsers:
    Chrome: 129.0.6668.70
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Severity

annoyance

[Conduitry]

What specifically isn't working as you'd expect? In your REPL, the .center-tbl selector is seen as unused, but that's because you have the div with that class commented out.

[ted-dgk]

<center-table> should do what .center-tbl does. I just had .center-tbl in there to make sure the css was doing the right thing. In the REPL the inner div should be centered in the outer div. It works in S4 and in plain HTML. As I said, svelte is not including the css that goes along with the custom tag. Obviously I could just use the class (and am as a workaround) but in my projects I like to use custom tags for semantic reasons. This will break a lot of things for me.

[ted-dgk]

Unsurprisingly globalizing works and the inner div is centered

  :global(center-table) {
    display: flex;
    width: 100%;
    justify-content: center;
  }

[paoloricciuti]

The issue is that we are not adding the class to center-table...gonna try to fix this now