How to update elements passed in slot with Stencil.js?

Question

I am creating a radio web component with Stencil.js.

Stencil.js code:

  <div>
    <slot/>
    <label>
      {this.label} <span/>
    </label>
  </div>

I pass an input of type radio. Usage in Angular:

<my-radio label="{{fruit}}">
    <input name="fruits" type="radio" id="{{fruit}}">
</my-radio>

When I click it the "input" I expect it should change from <input name="fruits" type="radio" id="banana"> to <input name="fruits" type="radio" id="banana" checked> .

But the input never gets the attribut "checked" even though everything is rendered properly. What am I doing wrong?

Answer 1

That's expected behavior that is independent of Stencil.

MDN's docs on the radio checked attribute:

A Boolean attribute which, if present, indicates that this radio button is the default selected one in the group.

The MDN docs for checkboxes make it more clear:

A Boolean attribute indicating whether or not this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement’s checked IDL attribute is updated.)

You can use the checked property instead to get the current value:

document.querySelector('input[type="radio"]').checked;