参考 Aurelia 中的插槽元素

Question

在 aurelia 中，当在自定义元素中使用插槽时，是否可以以某种方式在插槽上使用 ref 元素（可能是 Aurelia 团队的新功能？，据说 github 问题发布在 SO 而不是 github 上）。

例子：

元素.html：

<template> 
    My super awesome element
    <slot ref="slotContent"></slot>
</template>

元素.ts

export class CollapsePanel
{
    private slotContent: Element;

    attached(): void
    {
        this.slotContent.classList.add("my-fancy-class");
    }
}

otherview.html

<element>
    <div>This is some element content!</div>
</element>

渲染 otherview.html

<element>
    My super awesome element
    <div class="my-fancy-class">This is some element content!</div>
</element>

目前有什么办法吗？

Answer 1

您将强制组件的用户使用可以具有类属性的 html 元素。做这样的事情会更好吗：

自定义元素的模板

<template>
  <div ref="slotContent"><slot></slot></div>
</template>

代码：

export class CustomElement
{
    private slotContent: HTMLDivElement;

    attached(): void
    {
        this.slotContent.classList.add("my-fancy-class");
    }
}

使用自定义元素（使用 textnode 而不是 html 元素）

<customElement>foo</customElement>