javascript - 访问类中自定义元素的内容选择器

Question

自定义元素允许您在使用自定义标签时通过 <content></content> 访问自定义标签的内部 html选择器以及将内容拉入此 View 的一些规范。

我希望能够在我的类中访问这些数据而无需包装标签。

我尝试了以下方法:<content ref="content"></content>和 this.content在 databinding ref attribute 之后引用它Rob Eisenberg 喜欢的策略，但是 console.log(this.content)产量 undefined在元素生命周期的每个阶段。

我想到的解决方法是将 <content>在另一个元素中标记，使用 jquery 提取文本，缓存它，然后通过 ref 删除该元素属性，但这似乎不够优雅。

如何在与自定义元素关联的 es6 类中访问此数据？

示例场景:

some-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 绑定(bind)，因为 slot 元素有点“消失”并被投影的内容所取代。这是因为在 Shadow DOM 规范中，slot 实际上不是元素，它们是“处理指令”。