0

I have a simple custom element whose scrollbars I have styled, in the light DOM with the ::-webkit-scrollbar family of pseudo elements.

customElements.define(
  'my-element',
  class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode: 'open'})
        .innerHTML = `
        <style>
            :host {
                display: block;
                overflow: scroll;
            }
        </style>
        <slot></slot>`
    }
  }
)
my-element {
  width: 50vw;
  height: 50vh;
  border: 4px solid green;
}
p {
  border: 4px solid red;
  width: 75vw;
}

my-element::-webkit-scrollbar {
  block-size: 1rem;
}
my-element::-webkit-scrollbar-track {
  background-color: black
}
my-element::-webkit-scrollbar-thumb {
  background-color: red;
}
<my-element>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam iste esse eum molestias dolore fuga cupiditate! Ducimus est omnis ipsum aperiam, esse beatae dolorum repudiandae veritatis delectus labore dignissimos ratione!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam iste esse eum molestias dolore fuga cupiditate! Ducimus est omnis ipsum aperiam, esse beatae dolorum repudiandae veritatis delectus labore dignissimos ratione!</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae sunt vel dignissimos mollitia explicabo? Praesentium tempore nesciunt possimus non ex. Fugit, distinctio! Animi magni debitis totam est neque quia et?</p>
</my-element>

BUT, I need to be able to move the light DOM scrollbar styling into the element itself, presumably using the shadow dom. I've tried adding

::-webkit-scrollbar {
    block-size: 1rem;
}
::-webkit-scrollbar-track {
    background-color: black
}
::-webkit-scrollbar-thumb {
    background-color: red;
}

to the shadow dom's style but the scrollbars don't get styled. My bet there is some selector magic I need!

So what do I need to do?

backspaces
  • 3,802
  • 6
  • 34
  • 58
  • I don't think you can. Those styles are on the Element itself; not **_inside_** shadowDOM. And ``:host`` doesn't do pseudo selectors. So the escape hatch is to dynamically create a `` – Danny '365CSI' Engelman Jul 30 '23 at 06:09
  • I do have a solution like you suggest and it's OK I guess. But :host, according to MDN, "The :host CSS pseudo-class selects the shadow host of the shadow DOM containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM." Doesn't that sound like what I need? – backspaces Jul 30 '23 at 14:48
  • And another MDN quote: The host read-only property of the ShadowRoot returns a reference to the DOM element the ShadowRoot is attached to. https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/host Hmmm it refers to "host" not ":host" – backspaces Jul 30 '23 at 15:05
  • Yes, ``:host()`` **selector** references the Custom Element. But you can't stick pseudo selector on it. And ``host`` **property** is used in: ``.getRootNode().host`` And there is third "host" ``:host-context``, but that was a Google only party, like often they threw something against the wall to see if it would stick – Danny '365CSI' Engelman Jul 30 '23 at 15:53
  • Note: For some background on shadowDOM selectors and performance, see: https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668 – Danny '365CSI' Engelman Jul 30 '23 at 15:56
  • You mention: ":host doesn't do pseudo selectors". Could you point me to that? I couldn't find it. Tnx – backspaces Jul 31 '23 at 14:37
  • You misunderstood? I said ``:host`` does not do pseudoselectors. You can't stick ``::-webkit-scrollbar`` on it. – Danny '365CSI' Engelman Jul 31 '23 at 15:16

0 Answers0