Custom tag-name on custom elements (Green Core)

[Maximilian-R]

Description

Custom elements (Green Core) get a VER_SUFFIX added to them. Having an element name that changes over time does not play along nicely with some other tools.

Context: seb.se

For example Optimizely Experimentation (AB-tests). Their visual editor uses the tagname when selcting an element - which causes the test to fail in case we make a release that changes the version suffix during the test period.

We need to have the version suffix enabled to avoid conflicts with MFE:s using green, but we could perhaps work around the issue if we can specify a custom, but static version suffix.

Eg. pw, so gds-button-4ffa29 becomes gds-button-pw

Who will benefit from this feature?

Shell applications (seb.se)

Anything else?

No response

[splashdust]

An alternative which should be possible since 1.44.0 is to re-register a subclass under a different name. Like this:

// Create a subclass of a Gds component
class MyButton extends GdsButton {}

// Register under a custom name
window.customElements.define("my-button", MyButton);

// Also possible to use anonymous classes:
window.customElements.define('my-dropdown', class extends GdsButton {})

Not as seamless as a custom suffix since it would need to be done for each used component, but on the other hand offers more granularity.

What's your thoughts on this approach?

[Maximilian-R]

Cool, at this moment the need is mainly for buttons, so this could work fine! 😄👍

[Maximilian-R]

Could there be any problems with nested components though? Eg if we put a gds-button, renames as pw-button inside a gds-card for example. Could there be styles trying to target gds-button to position it or similar things?

[splashdust]

I don't think that should be an issue, since we use the gds-element attribute for targeting, and that should get correctly set on the component regardless of the actual element name. I.e, in the above scenario, the rendered DOM would look something like <my-button gds-element="gds-button">, so the selector [gds-element='gds-button'] should still target it.

[splashdust]

I'm closing this one now, since it seems like the custom registration solved the problem.

One addendum to the targeting concerns though, is that there are some places in the code that checks if a slotted element name starts with gds. This is necessary in some cases, since the [gds-element] attribute won't exist until the slotted child has initialized. So as a best practice, it would be safest to only change the suffix of the name.

So:

• Don't: xyz-button
• Do: gds-button-xyz