почему пользовательский элемент, расширенный из div, не работает как div с точки зрения стиля

Question

Я создаю пользовательский элемент html, расширяя div следующим образом:

class CustomDiv extends HTMLElement {
    constructor() {
    super();
    }
}

customElements.define('custom-div', CustomDiv, { extends: 'div' });

, и я использую это в html

<custom-div>

  <ul>
  <li>one</li>
  <li>two</li>
  </ul>

</custom-div>

, когда я пытаюсь применить стиль к этому custom-div используя css

custom-div {
  background-color: red;
}

но это не работает, что не так с моим кодом? вот это js скрипка

Answer 1

вы правы!

Вы не видите фон, потому что custom-div не имеет свойства отображения. Пожалуйста, добавьте display : block в ваш код

class CustomDiv extends HTMLElement {
	constructor() {
  	super();
	}
}

customElements.define('custom-div', CustomDiv, { extends: 'div' });

custom-div {
  background-color: tomato;
  display: block;
}

<!--https://html.spec.whatwg.org/multipage/scripting.html#custom-elements -->
<custom-div>
  
  <ul>
  <li>one</li>
  <li>two</li>
  </ul>
  
</custom-div>