是否可以在 lit 2.0 中制作类似 React 的复合组件?
Is it possible to make React-like compound components in lit 2.0?
我尝试使用 Lit 2.0 构建复合组件,但将数据作为属性传递给插槽似乎是不可能的。
<my-accordion>
<my-accordion-title>Title</my-accordion-title>
<my-accordion-content>Content</my-accordion-content>
</my-accordion
如何将“扩展”属性 传递给自定义元素槽?
这是我的自定义元素:
@customElement("my-accordion")
export class MyAccordion extends LitElement {
@property()
extended: boolean = false;
toggleExtend(){
this.extended = !this.extended
}
render() {
return html`
<div @click=${this.toggleExtend}>
<slot .extended=${this.extended}></slot>
</div>
`;
}
}
@customElement("my-accordion-title")
export class MyAccordionTitle extends LitElement {
// want to access parent node extended property here
render() {
return html`
<div>
<slot></slot>
</div>
`;
}
}
要将 extended
属性 分配给带槽子元素,请获取槽元素的 assignedElements()
数组。
@customElement("my-accordion")
export class MyAccordion extends LitElement {
@property()
extended: boolean = false;
toggleExtend(){
this.extended = !this.extended
}
updated(changed: PropertyValues<this>) {
if (changed.has('extended'))
this.extendedChanged()
}
extendedChanged() {
for (const child of this.slot.assignedElements()) {
if (child instanceof MyAccordionTitle)
child.extended = this.extended;
}
}
@query('slot') slot: HTMLSlotElement | null;
render() {
return html`
<div @click=${this.toggleExtend}>
<slot></slot>
</div>
`;
}
}
@customElement("my-accordion-title")
export class MyAccordionTitle extends LitElement {
// want to access parent node extended property here
render() {
return html`
<div>
<slot></slot>
</div>
`;
}
}
注意:将点击侦听器分配给 <div>
和其他非交互元素时,涉及许多可访问性问题。因此通常建议使用 <button>
元素,或者在您的情况下可能使用 <details>
和 <summary>
我尝试使用 Lit 2.0 构建复合组件,但将数据作为属性传递给插槽似乎是不可能的。
<my-accordion>
<my-accordion-title>Title</my-accordion-title>
<my-accordion-content>Content</my-accordion-content>
</my-accordion
如何将“扩展”属性 传递给自定义元素槽?
这是我的自定义元素:
@customElement("my-accordion")
export class MyAccordion extends LitElement {
@property()
extended: boolean = false;
toggleExtend(){
this.extended = !this.extended
}
render() {
return html`
<div @click=${this.toggleExtend}>
<slot .extended=${this.extended}></slot>
</div>
`;
}
}
@customElement("my-accordion-title")
export class MyAccordionTitle extends LitElement {
// want to access parent node extended property here
render() {
return html`
<div>
<slot></slot>
</div>
`;
}
}
要将 extended
属性 分配给带槽子元素,请获取槽元素的 assignedElements()
数组。
@customElement("my-accordion")
export class MyAccordion extends LitElement {
@property()
extended: boolean = false;
toggleExtend(){
this.extended = !this.extended
}
updated(changed: PropertyValues<this>) {
if (changed.has('extended'))
this.extendedChanged()
}
extendedChanged() {
for (const child of this.slot.assignedElements()) {
if (child instanceof MyAccordionTitle)
child.extended = this.extended;
}
}
@query('slot') slot: HTMLSlotElement | null;
render() {
return html`
<div @click=${this.toggleExtend}>
<slot></slot>
</div>
`;
}
}
@customElement("my-accordion-title")
export class MyAccordionTitle extends LitElement {
// want to access parent node extended property here
render() {
return html`
<div>
<slot></slot>
</div>
`;
}
}
注意:将点击侦听器分配给 <div>
和其他非交互元素时,涉及许多可访问性问题。因此通常建议使用 <button>
元素,或者在您的情况下可能使用 <details>
和 <summary>