Checked property is not updated on repetitive rendering

[atirip]

I have a case where there is form with radio buttons that can be different (depending of "tabs" i have"). Everything is rendered correctly at first pass: for example on Tab1 I have 5 radios and second is checked and when I switch to Tab2 and rerender (calling wire() with same props, but different id), I have 4 different radios and first is checked. Now when I switch back to Tab1 and rerender, nothing is checked. The issue is solved for me here:

    else if (name === 'data' || !isSVG && name in node && !readOnly.test(name)) {
        return function (newValue) {
          if (oldValue !== newValue || name == 'checked') {
            oldValue = newValue;

            if (node[name] !== newValue) {
              node[name] = newValue;

              if (newValue == null) {
                node.removeAttribute(name);
              }
            }
          }
        };

The case is that on these radios when rerendering the checked radios oldValue is equal to newValue and true, but node.checked is false - therefore checked property is not set. I apologize I have just now no time to dig deeper, why this happens, but this excluding 'checked' attribute seems solve my problem.

[WebReflection]

this works as expected to me https://codepen.io/WebReflection/pen/rorova?editors=0010

[atirip]

Hoist form outside of the wire: https://codepen.io/anon/pen/LMBqGO?editors=0010

[WebReflection]

that's how HTML radio works ... same name, only one radio can be selected and only one radio will be submitted (with its value).

You have a broken form, hyperHTML is not your issue there, use per each tab unique radio name if they are all inside the same form, or re-append through a fragment the same list of radio each time.