KPC
Kevin Powell - Community•3mo ago
Elias

`::slotted` behaviour and Firefox

Hey all, Hoping you can help me in getting to a solution. I've got two web components that work together, 
    <c-sidebar data-hidden>
      <slot slot="sidebar-control">
        <c-sidebar-control data-sidebar-hidden>
          {% include "icon/panel_left_open.html" with slot="icon-open" %}
          {% include "icon/panel_left_close.html" with slot="icon-close" %}
        </c-sidebar-control>
      </slot>
      ...
    <c-sidebar data-hidden>
      <slot slot="sidebar-control">
        <c-sidebar-control data-sidebar-hidden>
          {% include "icon/panel_left_open.html" with slot="icon-open" %}
          {% include "icon/panel_left_close.html" with slot="icon-close" %}
        </c-sidebar-control>
      </slot>
      ...
On mobile, when the sidebar is opened we need to display the close button, that is, display the slot. On desktop however, this isn't necessary. So in the component c-sidebar: 
    :host(:not([data-hidden])) {
      & nav {
        visibility: visible;
        animation: slide-in-right 0.1s ease-in;
      }
    }

    ::slotted([slot='sidebar-control']) {
      display: none;
    }

    @media screen and (width <= 768px) {
      :host(:not([data-hidden])) {
        & nav {
          width: var(--size-mobile-sidebar);
        }

        & ::slotted([slot='sidebar-control']) {
          display: block;
        }
      }
    }
    :host(:not([data-hidden])) {
      & nav {
        visibility: visible;
        animation: slide-in-right 0.1s ease-in;
      }
    }

    ::slotted([slot='sidebar-control']) {
      display: none;
    }

    @media screen and (width <= 768px) {
      :host(:not([data-hidden])) {
        & nav {
          width: var(--size-mobile-sidebar);
        }

        & ::slotted([slot='sidebar-control']) {
          display: block;
        }
      }
    }
This is behaving as expected on Chromium -- the button isn't displayed until the break point of <= 768px. However on Firefox the button always has display: block and it is inherited from the light dom css. Any help would be greatly appreciated.
1 Reply
Elias
EliasOP•3mo ago
My fault, I'm a clown. 🤡

Did you find this page helpful?