使用点亮元素的按钮Web组件

Question

我是WebComponents的初学者，并且正在使用TypeScript点亮来构建自定义按钮Web组件。

这些规格要求我将＆lt; svg＆gt; 和a ＆lt; p＆gt; 标记作为自定义组件中的孩子。例如：

<my-button>
   <svg slot="svg">...</svg>
   <p slot="label">sample text</p>
</my-button>

在我的自定义组件中，我有条件地渲染孩子。 SVG或标签或两者都将在条件下呈现。

为了造型开槽的元素，我尝试使用::插槽（p）{color：white}：

我也想更改SVG的填充，这些样式应在自定义组合样式内部进行处理。但是尚未设定样式。

我还想将不同的颜色设置为＆lt; p＆gt; ，具体取决于禁用或ot。我该如何实现？

Answer 1

这个问题有点广泛，但是我将尝试解决单独的部分，并解释我如何完成它们。由于问题询问了按钮的实现详细信息，因此有许多有效的答案。我专注于一个最小的答案，该答案解决了您的问题中的每个点。有一些文档链接以进行进一步阅读。

有关LIT游乐场中完成的现场演示，请参阅： https://lit.dev/playgrount/#gist = b630a85e7f9ff2db5300b5300b42f2f2f2f2f2f2f7a43f4

在实时链接中，您会找到 code> cody> cutam> custom-code-code> lit elements的列表标签。 display 属性有条件地渲染'ot''，'svg'，或'label'。还有一个禁用属性，可以禁用按钮并更改样式。

让我们分解。

使用反应性属性我们可以宣布显示什么按钮，以及是否显示公共属性被禁用。

在 custom-btn 类的上下文中，声明这些属性如下所示：

...
  @property()
  display: 'svg' | 'label' | 'both' = 'both'
      
  @property({type: Boolean})
  disabled = false;

渲染方法可以使用它们有条件地渲染命名插槽，并且还传播是否应使用使用来禁用该按钮？按钮，声明

...
  render() {
    return html`
        <button ?disabled=${this.disabled}>
          ${this.display === 'svg' || this.display === 'both'
                ? html`<slot name="svg"></slot>`
                : null}
          ${this.display === 'label' || this.display === 'both'
                ? html`<slot name="label"></slot>`
                : null}
        </button>
        `;
  }

href =“ https://lit.dev/docs/templates/express/w.boolean-attribute-expressions” rel =“ nofollow noreferrer”> boolean属性 问题。

为了添加样式，可以像您在问题中提到的那样选择插槽内容：

  static styles = css`
    ::slotted(*) {
      color: red;
    }
    :host([disabled]) ::slotted(*) {
      color: blue;
    }
  `

当启用按钮时，这将使所有插入的内容染色，并为所有插入的内容涂上蓝色，如果主机元素具有 nas code> disabled 布尔属性。

注意： > 选择所有插入的内容。

and ：host [disabled] 选择 host ，即， custom-btn 具有残疾属性时的情况在上面。因此，当遇到＆lt; custom-btn禁用时，选择器会激活。

为了使SVG填充颜色继承并使用CSS的颜色，SVG使用特殊关键字很重要： CurrentColor 。注意在实时repro： fill =“ CurrentColor” 设置在SVG元素上。

希望这可以解除您的按钮实现！