从无容器自定义元素——Aurelia中获取类列表

Get the class list from a containerless custom element - Aurelia

本文关键字:Aurelia 列表 获取 元素 自定义      更新时间:2023-09-26

我有一个自定义元素,它将SVG内联注入视图(要点:https://gist.run/?id=3a20dc24ca5c32c4b29fe6990dd30156)。
我需要做的一件事是,当我使用自定义元素时,我在自定义元素上编写的任何类都会被转移到内联svg中。当类使用绑定时,我让它工作,但如果我只使用常规文本,则不会。
例如,我想要这样(其中style = 'worked'):

<inline-svg svg="leaf" class="${style}"></inline-svg>

要转换成这样(它没有嵌套在inline-svg元素中,因此是无容器的):

<svg class="worked" version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 44.8" style="enable-background:new 0 0 48 44.8;" xml:space="preserve">


这很好。但是,当我想为类使用常规文本值时,我无法在元素上找到该类属性,因为视图模型中的元素只是锚标记的注释。
例如,我想这样写:

<inline-svg svg="leaf" class="worked"></inline-svg>

也变为this:

<svg class="worked" version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 44.8" style="enable-background:new 0 0 48 44.8;" xml:space="preserve">

当使用无容器自定义元素时,我如何获得原始元素的类属性?

只是需要在正确的时间调用正确的函数。
不是调用this.el.class,我需要调用this.el.getAttribute('class'),它在原始元素上做一种反向get属性,而不是注释。
只是一个头对着键盘的时刻…