I noticed a problem with your code. In your example you have var min = 0, max = 99, disabled = true, heading = 1;
With this the number input renders as expected, disabled. However, if you change the disabled value to false: var min = 0, max = 99, disabled = false, heading = 1;
, the function crashes and nothing loads. This is because you have the following:
document.body.appendChild(html`<input type="number" min="${min}" max="${max}" name="number" id="number" class="number-input" ${ (disabled ? 'disabled' : '') }/>`);
That last part, ${ (disabled ? 'disabled' : '') }
returns an empty string when disabled is set to false. That causes a problem on line 333 where you try to set an attribute on the node:
(tag || node).setAttribute(name, value);
When the value for an attribute is an empty string, as in the case above with disabled set to false, the method attempts to set that as an attribute, throwing an error. You could wrap that method with a test for a truthy attribute name like so:
// add the attribute to the new tag or replace it on the current node
// setAttribute() does not need to be escaped to prevent XSS since it does
// all of that for us
// @see https://www.mediawiki.org/wiki/DOM-based_XSS
if (tag || hasSubstitution) {
if (name) {
(tag || node).setAttribute(name, value);
}
}
This solves the problem, but you should probably be checking the attribute earlier to make sure it isn't an empty value and skip it.