Andrew Andrew - 1 month ago 10
Javascript Question

Get the class list from a containerless custom element - Aurelia

I have a custom element that is injecting an SVG into the view inline (gist: https://gist.run/?id=3a20dc24ca5c32c4b29fe6990dd30156).

One of the things that I need to work is that when I use my custom element, any classes I write on the custom element get transferred to the inline svg. I have this working when the class is using a binding, but not if I just use regular text.

For example, I want this (where

style = 'worked'
):

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


To turn into this (it's not nested inside the
inline-svg
element, hence containerless):

<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">





That works fine. But when I want to use a regular text value for the class, I'm unable to find that class property on the element since the element in the view-model is just a comment for the anchor tag.

For Example, I want this:

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


To also become 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">





How do I get the class attribute off of the original element when using a containerless custom element?


Answer

Was a matter of just needing to call the right function at the right time.
Instead of calling this.el.class, I need to call this.el.getAttribute('class') which does a kind of reverse get attribute on the original element instead of the comment.
Just one of those head-to-keyboard moments...