Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Host, when setting values on attributes within a render function - with the exception of class - will toss a value that's set on the html element prior to the lifecycle. Ideally, we can have some mechanism to allow all attributes to be overwritten - or a select few attributes.

Describe the Use Case

Consider this naive render function:

<Host role="header">...</Host>

Right now, if users did:

<ion-header role="somethingelse"></ion-header>

that would not work and the somethingelse value would be lost.

Describe Preferred Solution

@Component({
  host: { 
    mutableAttributes: true // or ["role"] 
  }
})

Which will allow attributes the element has set to be read and overwritten prior to when the lifecycle is called.

Describe Alternatives

import {Host} from "@stencil/core"

Host.mutableAttributes = ["role"] // or true

export class Component {
  render() {
    return <Host role="header" />
  }
}

or

import {Host} from "@stencil/core"

export class Component {
  render() {
    Host.inherit = ["role"];
    return <Host role="header" />
  }
}

Related Code

No response

Additional Information

(Via @willmartian)

For context, this is what we do right now: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/input/input.tsx#L237

And then this: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/input/input.tsx#L439