Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom HTML tag not picking up css #13426

Closed
ted-dgk opened this issue Sep 28, 2024 · 4 comments · Fixed by #13435
Closed

Custom HTML tag not picking up css #13426

ted-dgk opened this issue Sep 28, 2024 · 4 comments · Fixed by #13435
Assignees
Labels
Milestone

Comments

@ted-dgk
Copy link

ted-dgk commented Sep 28, 2024

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
Copy link
Member

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.

@Conduitry Conduitry added the awaiting submitter needs a reproduction, or clarification label Sep 28, 2024
@ted-dgk
Copy link
Author

ted-dgk commented Sep 28, 2024

<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
Copy link
Author

ted-dgk commented Sep 28, 2024

Unsurprisingly globalizing works and the inner div is centered

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

@paoloricciuti
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants