feat: Support custom tag names

[sdvg]

Prerequisites

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

Describe the Feature Request

Allow the tag names emitted by the output targets to be modified.

Describe the Use Case

Stencil already supports the option tagNameTransform: https://github.com/ionic-team/stencil/blob/16519d935ab6dcff31144f62d44bfdf95ea48d93/src/declarations/stencil-public-compiler.ts#L342

This allows us to add a suffix to our component tag names, for example. It would be good to have a similar option in the adapters so we can still make use of the adapters, while using custom tag names.

Describe Preferred Solution

A usage example could look like this:

import { setCustomTagNameTransformer } from <my-library>/react'

const transformTagName = (tagName: string) => `${tagName}-v2`;
setCustomTagNameTransformer(transformTagName);

Describe Alternatives

Implementing the web component tags directly, without utilizing the adapters.

Related Code

No response

Additional Information

The general idea of using Stencil in a Microfrontend environment is explained very well here: https://dev.to/sanderand/running-multiple-versions-of-a-stencil-design-system-without-conflicts-2f46

Part of this is configuring tagNameTransform.

Draft PR showcasing a possible implementation: #421

[ionitron-bot]

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README