this.getAttribute() returns undefined when used with async components

[alsoicode]

Hello,

When incorporating markdown-toolbar-element into an Angular (11.2.12) component that is added to the DOM dynamically, this.getAttribute() returns undefined. A concrete example of this would be the level attribute of MarkdownHeaderButtonElement

If I force the event loop to tick one time:

class MarkdownHeaderButtonElement extends MarkdownButtonElement {
    constructor() {
        super();

        setTimeout(() => {
            const level = parseInt(this.getAttribute('level') || '3', 10);
            if (level < 1 || level > 6) {
                return;
            }
            const prefix = `${'#'.repeat(level)} `;
            styles.set(this, {
                prefix
            });
        }, 0);
    }
}

it works as expected. Do you have a default strategy for this scenario? Unfortunately, adding setTimeout() breaks the test cases for title.

[koddsson]

When incorporating markdown-toolbar-element into an Angular (11.2.12) component that is added to the DOM dynamically, this.getAttribute() returns undefined.

Could you attach a minimum reproduction case so we can dig into the issue?

[alsoicode]

Sorry for the delay getting back to you. I'll try to make some time to get a StackBlitz together.

[mjsprengers]

Hi @koddsson @alsoicode,

Running into the same issue, here's a repro in Stackblitz