[MDCSlider] MDCSliderFoundation: 'value' must be non-null

[klyakh]

Bug report

*** Chrome ONLY ***

Initializing MDCSlider from dynamically created DOM tree (vie Vue runtime) leads to error in Chrome: MDCSliderFoundation: 'value' must be non-null

Steps to reproduce

1. Example - https://codesandbox.io/s/mdc-slider-value-bug-sffqnz?file=/vue.html:1508-1641
2. Slider's HTML is wrapped by div, which is root for Vue app. Therefore this HTML will be treated as template and respective DOM tree will be created by Vue runtime.
3. The app just initializes MDCSlide component.
4. See error

Your Environment:

Software	Version(s)
MDC Web	13.0.0
Browser	Chrome 101
Operating System	Win

Additional context

The error happens during processing "value" attribute. I guess it happens because slider's HTML is treated as template by Vue. Vue creates respective input element and adds it to DOM tree. I don't know details, but I guess they set value not via setAttribute but via .value property. So the attribute remains unset. Also I believe Chrome recently changed getAttribute implementation to comply with W3C. Before if attribute is null, respective property would be returned. Now it only returns attribute value as is. Here are some related links:

• https://bugs.chromium.org/p/chromium/issues/detail?id=1205107
• https://bugs.chromium.org/p/chromium/issues/detail?id=1205107#c25
• https://bugs.chromium.org/p/chromedriver/issues/detail?id=3746 - change details

I think this error is not specific to Vue. It will happen to all dynamically created sliders, which value is set via .value property, not via setAttribute().

Possible solution

Most likely need to use .value property instead of getAttribute to get slider's initial value.

Temporary workaround

The example contains fix (commented lines) for the issue. Just call setAttribute before creating MDCSlider component.