后备EN组成 - 网络组件
#javascript #网络开发人员 #Web组件 #lit

构图是一个赞助人，它允许我们在组件中定义某些部分由组件外部元素占据的部分。

这使我们的组件更加灵活，因为更难分离责任，从而避免创建将所有内容都封装在一行中的组件，因为黑色收银员系统

即使用户没有为组件提供必要的元素，我们有时需要组件来满足某些功能，但是我们这样做了吗？后备输入这一点。

我们将从一个基本示例开始，我们将创建一个称为ImageFilter的组件，该组件将某些过滤器应用于图像。

要使这个元素起作用，他需要一个图像，然后我们去看它。

import { LitElement, css, html } from 'lit';

export class ImageFilter extends LitElement {
  static get properties() {
    return {
      filter: { type: String },
    };
  }

  constructor() {
    super();
    this.filter = 'gray';
  }
  render() {
    return html`
      <div class="filter-${this.filter}">
        <slot></slot>
      </div>
    `;
  }

  static get styles() {
    return css`
      :host {
        min-width: 98%;
        margin: 0 auto;
        padding: 2rem;
        text-align: center;
      }

      .filter-gray {
        filter: grayscale(100%);
      }
    `;
  }
}

window.customElements.define('image-filter', ImageFilter);

您可以看到的是一个组件网络，其最大的宽限于应用过滤器并声明一个允许我们制作构图的插槽。您可以看到完整的代码aquí

现在使用它，我们只需使用以下行

<image-filter>
   <img style=" width: 50%;" src="./public/vite.svg" alt="vite logo"/>
</image-filter>

我们会得到以下结果

Vite logo en escala de grises

但是，如果我们没有图像，我们看不到组件所应用的效果，那么如果不存在，我们需要占据SON元素位置的东西，因此我们将使用火焰。

要在我们的老虎机中创建火焰，我们应该simp 

render() {
    return html`
      <div class="filter-${this.filter}">
        <slot>
          <img style="width: 50%" src="./src/assets/lit.svg" alt="Vite logo" />
        </slot>
      </div>
    `;
  }

如果未提供插槽外部内容，则内部内容将位于其位置，这些故障可行。因此，当我们以这种方式使用组件

<image-filter></image-filter>

我们可以看到以下结果

Lit logo

我希望您喜欢它，并且对许多事情来说都是Ostil，我已经在更复杂的组件（例如男人和Bysae Inputs）中使用了它此示例的示例是aquí