Add tag name transformer support to defineCustomElement

[sdvg]

What is the current behavior?

GitHub Issue Number: N/A

What is the new behavior?

Documentation

Does this introduce a breaking change?

• Yes
• No

Testing

Other information

[johnjenkins]

Hey @sdvg - thanks for looking at this, but I think this pattern (and a lot more) will be covered by this #6211

[sdvg]

@johnjenkins Oh no, I wasn't aware you're working on this as well. Bad timing from my side, I guess. Anyway, I'm happy to see progress on this feature!

I will ping you on Discord. Let's find out if anything from my PRs can be salvaged or if I can support you in another way with this.

[sdvg]

Related PR for React Adapter: stenciljs/output-targets#635

Overview of this approach:

• Singleton Module for Runtime Transformation:
  • Each adapter includes a singleton module that can store a tag name transformer function at runtime. For example:

    import { setTagNameTransformer } from '@stencil/react-output-target/runtime';
    setTagNameTransformer((tagName: string) => tagName + '-modified');
    

• Propagating the transformer: The adapter wrapper components pass the tag name transformer function to the defineCustomElement function in the core dist-custom-elements output target.
• Tag name modification during registration: When a custom element is defined, defineCustomElement invokes the transformer function to modify tag names before registration.
• Framework adapter integration: The Framework adapter similarly calls the tag name transformer to modify tag names before rendering.