Kevin Powell - CommunityKP-C
Kevin Powell - Community•5mo ago•
1 reply
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>
      ...


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;
        }
      }
    }


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.
Was this page helpful?