Container Style Query Bug (Safari)

HTML

<custom-element>
  <custom-element>
    <custom-element>
      <custom-element>
        <custom-element>
          <custom-element>
            <custom-element>
              <custom-element>
                <custom-element>
                  <custom-element>
                  </custom-element>
                </custom-element>
              </custom-element>
            </custom-element>
          </custom-element>
        </custom-element>
      </custom-element>
    </custom-element>
  </custom-element>
</custom-element>

JavaScript

const styleSheet = new CSSStyleSheet;
styleSheet.replaceSync(`
  :host {
    display: block;
  }
  
  :host {
    --custom-property: value;
    border: 1px solid red;
    margin: 2%;
    width: 96%;
    height: 96%;
  }

  @container style(--custom-property: value) {
    :host {
      border-color: green;
    }
  }
`);


class CustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const slot = document.createElement('slot');
  
    this.shadowRoot.appendChild(slot);
    this.shadowRoot.adoptedStyleSheets.push(styleSheet);
  }
}
customElements.define('custom-element',CustomElement);