Aurelia - 在插槽内引用自定义元素视图模型

Question

If I have a custom element like this:

export class mycomponent {
    constructor() {
         this.name = 'John Doe';
    }
}

<template>
     My component
     <slot></slot>
</template>

And use this component inside another view (I registered the custom element globally):

<template>
    <mycomponent>
        Test
        ${name}
    </mycomponent>
</template>

Is it possible to access the view model of mycomponent in this scope? Like printing out its property name for example?

EDIT So here is my final solution: gist my solution

I put the replaceable part inside my custom element:

<template>
  <template replaceable part="content"></template>
</template>

and then processContent attribute on the view model:

import { processContent } from 'aurelia-framework';

@processContent(replacePart)
export class MyComponent {
  name = "John Doe";
}

function replacePart(compiler, resources, node){
    node.innerHTML = `<template replace-part="content">${node.innerHTML}</template>`;
    return true;
}

Like this it works more like a slot with cleaner syntax:

<h4>Component 1</h4>
<my-component>
    <div>One name</div>
    <strong>${name}</strong>
</my-component>

Answer 1

As far as I know, it cannot be achieved using slots.

However, Aurelia has a feature called replaceable parts : [Blog post] . This might be a better fit for your requirements.

Demo: https://gist.run/?id=dcffe2afcb1eee1777e9b0d9f7366d28

Edit: HUB docs: [Cheat Sheet / Template Parts]