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区域内。最初，这些孩子是组件的一部分并具有样式。现在它们不在其范围内，并且不再应用样式。有谁知道如何解决这个问题？我在文档中发现，您可以使用:: slotted（）css属性，但显然似乎没有用。还是我做错了其他事情？我还尝试将样式标签放入render html中，但这只会产生很小的影响。

我不知道应该关注哪条路线。任何帮助表示赞赏。恕我直言，样式应该是组件本身的一部分，而不是由使用组件的人决定的。但是该插槽元素破坏了一切，尽管其余结构仍然相同。

Answer 1

:: slotted语法将带有免责声明，我将在此之后进行解释。如果您希望插槽中p标签内的所有文本均为绿色，则语法为：

REL_ALERT

免责声明是这不是ShadowDom的一部分，因此不受保护。也就是说，宿主文档仍可以覆盖CSS。插槽内的元素被视为在“轻型DOM”中。

要控制插槽内的元素，您可以使用生命周期事件之一来解决此问题。例如：

PutSQL

您可以在firstUpdated处理程序中以编程方式设置广告位内容的样式。不是requestAnimation框架。我为此https://github.com/Polymer/lit-html/issues/338参考了以下gitHub讨论。讨论的上下文是另一个Web组件的插槽内的Web组件，但是我认为这样做是一个好习惯，因为在自定义组件firstUpdated被触发时，插槽元素可能无法完全呈现。

设置插槽元素中随附的内容

1 个答案: