0

I'm trying to get the slotted item to fill the parents container in Safari. The following works in Chrome, FF, even Edge-Chromium, but not Safari. I only have ability to modify the content and styles of the slotted item and not the slot's container (i.e i can modify .c-name, but not user-card)

customElements.define( "user-card",
  class extends HTMLElement {
    
    connectedCallback() {
      const randomHeight = 
            (Math.random() * 400 + 200)<<0;
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
      <style>
        .card {
          display: flex;
          flex-direction: column;
          height: ${randomHeight}px;
        }
        .card > div {
          flex: auto;
          border: 1px solid blue;
        }
        
      </style>
      <span>Height: ${randomHeight}px</span>
      <div class="card">
        <div class="card-header">Head</div>
        <div class="card-content"><slot /></div>
        <div class="card-footer">Foot</div>
      </div>
    `;
    }
  }
);
.c-name {
  background: black;
  color: white;
  height: 100%;
}
<user-card>
  <div class="c-name">
    <span>John Smith</span>
  </div>
</user-card>
confuzzled
  • 1

2 Answers2

0

It's not very clear what you are trying to accomplish. Your .c-name is not part of the .card div. You better post just HTML, CSS and JS without any components, it's easier to debug. I made an example that works in Safari but still your code is not very clear so it's hard to give you correct answer.

This is how your code looks in dev tools:

enter image description here

.card {
  display: flex;
  flex-direction: column;
  height: 467px;
}
.card > div {
  flex: auto;
  border: 1px solid blue;
}

.card-content {
  background: red;
}
<div class="card">
  <div class="card-header">Head</div>
  <div class="card-content"><slot /></div>
  <div class="card-footer">Foot</div>
</div>
Denis Omerovic
  • 1,420
  • 1
  • 10
  • 23
  • The component he uses has a shadowDOM ```` to which the *lightDOM* content ``.c-name`` is **slotted**. And lightDOM must be styled in the container DOM (most of the time main DOM) NOT in shadowDOM styles. I can't help as I don't have Safari. Maybe the solution is in: https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668 – Danny '365CSI' Engelman Mar 16 '21 at 13:20
  • 1
    Like @Danny'365CSI'Engelman said. If i could touch the css for the card, this wouldn't be an issue, but thanks. – confuzzled Mar 16 '21 at 18:23
  • It is an ''open'' shadowRoot. So ``.querySelector("user-card").shadowRoot.querySelector("style")`` gets you into the StyleSheet.. https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet – Danny '365CSI' Engelman Mar 16 '21 at 18:52
0

This unfortunately appears to be a bug in Safari - it is fixed in the latest Technology Preview (122).

lamplightdev
  • 2,041
  • 1
  • 20
  • 24