Как выбрать теневой элемент хоста DOM, только если он является последним дочерним элементом? - PullRequest
Новая
       32

Как выбрать теневой элемент хоста DOM, только если он является последним дочерним элементом?

1 голос
/ 01 мая 2020

Я хочу выбрать теневой элемент хоста DOM, только если это последний дочерний элемент.

В этом примере все они зеленые, я хочу, чтобы они были красными, кроме последнего. 

class MyCustomElement extends HTMLElement {
  constructor(){
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <h5>Element:</h5>
      <slot></slot>
      <style>
        :host {
          color: red;
        }
        :host-context(:last-child) {
          color: green;
        }
      </style>
     `;
  }
}
window.customElements.define('my-custom-element', MyCustomElement);
<div>
  <my-custom-element>first</my-cutom-element>
  <my-custom-element>... more elements</my-cutom-element>
  <my-custom-element>last</my-cutom-element>
</div>

Все они зеленые ... Я хочу, чтобы только последний был зеленым.

Я также пытался :host:last-child, чтобы ничего не делает и :host-context(my-custom-element:last-child) также делает их всех зелеными.

1 Ответ

1 голос
/ 02 мая 2020

Возьмите указатели из моего другого ответа: Используйте CSS селекторы, такие как: первый ребенок внутри тени dom

Ваши элементы остаются скрытыми в lightDOM!
any применяемый вами глобальный стиль (в любое время) будет отраженным для shadowDOM 

customElements.define('my-custom-element', class extends HTMLElement {
  constructor(){
    super()
      .attachShadow({mode: 'open'})
      .innerHTML = `<slot></slot><style>:host { color: red; }</style>`;
  }
});
<div>
  <my-custom-element>first</my-custom-element>
  <my-custom-element>... more elements</my-custom-element>
  <my-custom-element>last</my-custom-element>
</div>

<style>
   div my-custom-element:last-child {
        padding:    .5em;
        background: green;
   }
</style>

Примечания:

Re: comment:

Это может быть реальный ответ, но это облом, я думал, что весь смысл теневого дома должен быть самодостаточным, если мне нужно написать некоторые стили в глобальном затем таблица стилей для того, чтобы создать стиль в теневом домике, который не кажется чем-то особенным, неудивительно, что люди тяготеют к таким вещам, как реакция и vue, когда веб-стандарты настолько плохи.

Думайте об этом так. если ваши my-custom-element, где <p> элементы; как бы <p> узнал, что это внутри last-child ... только путем ссылки на его родительский контейнер .

Если вы не хотите, чтобы этот контейнер был глобальной областью действия, тогда:

неудивительно, что люди тяготеют к таким вещам, как React и Vue, когда веб-стандарты настолько плохи.

Все Каркасы делают точно так же, они упаковывают вещи в контейнеры (будь то в обычном DOM, shadowDOM, виртуальном DOM (памяти)

Лучше сказать: Frameworks frame ваш контент в контейнерах .. всегда

Стандартный API пользовательских элементов W3 C дает 100% -ный контроль использовать контейнер или нет.

Да, это означает, что вы должны выполнить некоторые сценарии / готовить, прежде чем сможете пообедать.

У вас есть 100% свобода в том, как вы хотите готовить компоненты.

React добавляет 48 КБ (GZipped) к вашей загрузке, не говоря уже о всем процессе сборки, не говоря уже о нем никогда не будет работать в унисон с любым другим фреймворком, не говоря уже о том, что он даже не соответствует стандарту ES.

Дополнительный пользовательский элемент занимает у вас около 15 минут, а может и 200 байт

...