Селектор доступа к содержимому в классе для настраиваемого элемента

Question

Пользовательские элементы позволяют вам получить доступ к внутреннему HTML-тегу пользовательского тега при его использовании через селектор <content></content> вместе с некоторыми спецификациями, для которых содержимое вставляется в это представление.

Я хочу, чтобы иметь возможность доступа к этим данным в моем классе без упаковки тега.

Я попытался следующие: <content ref="content"></content> и this.content ссылаться на него после databinding ref attribute стратегии Rob Eisenberg выскажется, но console.log(this.content) урожайности undefined на каждом этапе жизненного цикла элемента.

Обходной путь, который я думал о размещении тега <content> в другом элементе, вытащить текст с помощью jquery, кешировать его и удалить этот элемент через атрибут ref, но это кажется неэлегантным.

Как я могу получить доступ к этим данным в классе es6, связанном с пользовательским элементом?

Пример сценария:

некоторые-view.html

<template> 
    <customelement>Hello World</customelement> 
<template> 

customelement.html

<template> 
    Something, but not a content tag 
</template> 

customelement.js

export class CustomElement { 
    get foobar() { 
     //Somehow ascertain "Hello World" without displaying it in customelement 
    } 
} 

В этом примере можно предположить, что пользовательский элемент может быть включен глобально.

Answer 1

Мы больше не используем элемент content. Начиная с RC, мы используем элемент slot. При этом элемент slot не поддерживает привязку ref, поскольку элемент слота «исчезает» и заменяется проецируемым контентом. Это связано с тем, что в спецификации Shadow DOM slot s на самом деле не являются элементами, они являются «инструкциями по обработке».

Answer 2

Вот пример, который показывает, что вы можете получить с точки зрения контента на разных этапах жизненного цикла компонентов.

https://gist.run?id=e372bdb91990d08ad49cdf39753cc622 **

app.html

<template> 
    <require from="./my-element"></require> 

    <my-element> 
    <div repeat.for="i of 5">${i}</div> 
    </my-element> 
</template> 

мои-element.html

<template> 
    Hello! 
    <slot></slot> 
</template> 

мои-element.js

import {inject, processContent, noView} from 'aurelia-framework'; 

@inject(Element) 
export class MyElement { 
    constructor(element) { 
    this.element = element; 
    alert('constructed:\n\n' + this.element.innerHTML); 
    } 

    created() { 
    alert('created:\n\n' + this.element.innerHTML); 
    } 

    bind() { 
    alert('bind:\n\n' + this.element.innerHTML); 
    } 

    attached() { 
    alert('attached:\n\n' + this.element.innerHTML); 
    } 
}