Skip to content

Commit a414178

Browse files
committed
Convert constructor to a connectedCallback function
Building a header button in memory with a custom heading ("level") causes a unexpected behaviour. Consider the following example: ```js const headerButton = document.createElement('md-header') // The constructor is executed at this point. headerButton.setAttribute('level', '1') // Has no effect since the style has already been set. headerButton.textContent = 'h1' document.body.appendChild(headerButton) ``` While we expect to have a header button that outputs a single hash (`#`), we have a button that outputs three (`###`). The constructor sets the styles based on the `level` attribute when the component is initialised. Changing the constructor to a `connectedCallback` function ensures that the button styles aren't set until the button is connected to the DOM.
1 parent 2fe2941 commit a414178

File tree

1 file changed

+1
-3
lines changed

1 file changed

+1
-3
lines changed

src/index.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,7 @@ class MarkdownButtonElement extends HTMLElement {
111111
}
112112

113113
class MarkdownHeaderButtonElement extends MarkdownButtonElement {
114-
constructor() {
115-
super()
116-
114+
connectedCallback() {
117115
const level = parseInt(this.getAttribute('level') || '3', 10)
118116
if (level < 1 || level > 6) {
119117
return

0 commit comments

Comments
 (0)