1 reply

`::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

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

display: block

and it is inherited from the light dom css.

Any help would be greatly appreciated.

`::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

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

display: block

and it is inherited from the light dom css.

Any help would be greatly appreciated.

`::slotted` behaviour and Firefox

Similar Threads

`::slotted` behaviour and Firefox

Similar Threads

Similar Threads

Similar Threads