Стилизация того, что поставляется в элемент слота

Question

Мой запрос странный, так как я использовал другой подход, который полностью сработал и стал намного чище Тем не менее, SEO позвонил мне и сказал, что моя структура не очень удобна для Googlebot.

Итак, вот ситуация (пожалуйста, не судите об этом, я знаю, что есть другие способы сделать то, что я пытаюсь достичь, вообще не используя дочерние фрагменты):

Это мой компонент:

class Container extends LitElement {
  static get tagName() {
    return 'container';
  }

  static get styles() {
    return css`
      ${unsafeCSS(styles)}
    `;
  }

  render() {
    return html`
      <article class="o-container">
        <slot></slot>
      </article>
    `;
  }
}

defineOnce(Container.tagName, Container);

export default Container;

Вот как я это использую:

  <footer>
    <div class="o-footer__collection">
      <div class="o-footer__main">
        <h1 class="o-footer__title-desktop">
          me & me
        </h1>
        <button
          class="o-footer__accordion-button"
        >
          <h1 class="o-footer__title">
            you & you
          </h1>
          <span
            class="o-footer__accordion-button-caret o-footer__accordion-button-caret--open"
          >
            blabla
          </span>
        </button>
        <ul
          class="o-footer__main-content-panel o-footer__main-content-panel--open"
        >
          <li
            class="o-footer__main-content-panel-list-item"
          >
            <a
              href="https://google.com"
              target="_blank"
              >Contact</a
            >
          </li>
        </ul>
      </div>
  </footer>

Видите ли, все эти дети приземляются в области slot компонента. Первоначально эти дети были частью компонента и имели стиль. Теперь они находятся вне его, и стиль больше не применяется. Кто-нибудь знает, как обойти эту проблему? В документации я обнаружил, что вы можете использовать атрибут css :: slotted (), но, похоже, он не работает. Или я, вероятно, сделал что-то еще не так? Я также пытался поместить тег style в html render, но это имеет незначительные последствия.

Я не знаю, на каком маршруте мне следует сосредоточиться. Любая помощь приветствуется. ИМХО стилизация должна быть частью самого компонента, а не парнем, использующим компонент. Но этот элемент слота сломал все, хотя остальная часть структуры все та же.

Answer 1

Синтаксис :: slotted будет работать с заявлением об отказе, которое я объясню после этого.Если вы хотите, чтобы весь текст внутри p-тегов в вашем слоте был зеленым, синтаксис будет следующим:

::slotted(p) {
  color: green;
}

Отказ от ответственности заключается в том, что это не часть ShadowDom, поэтому он не защищен.т. е. хост-документ все еще может переопределять CSS.Элементы внутри слота считаются находящимися в «легком DOM».

Чтобы иметь возможность контролировать элементы внутри слота, вы можете подойти к этому с помощью одного из событий жизненного цикла.Например:

firstUpdated(changedProperties) {
    requestAnimationFrame(() => {
      const paras = document.querySelector("test-element").querySelectorAll('p');

      [].forEach.call(paras, (e)=>{
        e.style.color = "green";
      });
});

Внутри обработчика firstUpdated вы можете программно стилизовать содержимое слота.Не просьба Анимация кадров.Я ссылаюсь на следующее обсуждение gitHub для этого https://github.com/Polymer/lit-html/issues/338. Контекст этого обсуждения - веб-компонент внутри слота другого веб-компонента, но я думаю, что это может быть хорошей практикой, поскольку элементы слота могут быть не полностьюотображается при запуске пользовательского компонента firstUpdated.