Как предотвратить рендеринг элемента Slotted HTML, пока он не окажется внутри тени Root? - PullRequest
Новая
       4

Как предотвратить рендеринг элемента Slotted HTML, пока он не окажется внутри тени Root?

2 голосов
/ 02 февраля 2020

У меня очень простой сайт, похожий на этот jsfiddle . Кажется, что все работает нормально, но на моем локальном, но когда я останавливаюсь на первой строке JS (до объявления пользовательских элементов), я вижу div без форматирования ... 

<jrg-test>
  <div slot="test">
      This should work
  </div>
</jrg-test>

connectedCallback() {
  console.log("Ok we are working")
  this.shadowRoot.innerHTML = "<slot name='test'></slot>"
  const element = document.createElement('style');
  element.textContent = "::slotted(*){background-color:red;color:white;}";
  this.shadowRoot.appendChild(element);
}

Таким образом, в основном, если я остановлюсь до того, как пользовательский элемент будет отрендерен, я вижу необработанный div. Я знаю, что есть некоторые хакерские решения, связанные с позиционированием и CSS, но есть ли более чистое решение. Возможно, один из них я могу реализовать исключительно в JS?

Так что главный вопрос в том, как мне скрыть текст This should work, пока не будут применены красный фон и белый цвет?

1 Ответ

1 голос
/ 03 февраля 2020

Возможно, вы могли бы попытаться использовать псевдокласс :defined CSS, чтобы скрыть пользовательский элемент, пока он определен.

См. Пример ниже: 

class TestElement extends HTMLElement{
  constructor(){
    super();
    console.log("Attaching the shadow")
    this.attachShadow({mode:'open'})
  }
  connectedCallback() {
    console.log("Ok we are working")
    this.shadowRoot.innerHTML = `<style>
      ::slotted(*){background-color:red;color:white;}
      </style>
      <slot name='test'></slot>`
  }
}
upgrade.onclick = () => customElements.define("jrg-test", TestElement)
jrg-test:not(:defined) {
  display:none
}
<jrg-test>
  <div slot="test">This should work</div>
</jrg-test>

<button id="upgrade">upgrade</button>
...