feat(stable-selector): dispatch event with shadow DOM

[IgnacioBecerra]

Related Ticket(s)

None.

Description

Due to AEM having a hard time accessing the shadow DOM, this PR creates a new event that dispatches on component render if any component has a get-shadow-dom attribute, containing the shadowDOM as an event detail. This will make it easier to retriever and modify the shadow DOM through the program by listening to the events on load.

<dds-card get-shadow-dom></dds-card>

in document:

  window.addEventListener('dds--card', (e) =>
    console.log((e as CustomEvent).detail.shadowDOM)
   // do stuff with it
  );

As an example, you can open the console in the default Card story to see that the shadow DOM element will be retrieved through listening to the event. We could also add more data to be sent through this event, if needed. Likewise, we could limit the elements retrieved through the event by scoping the query instead of the whole shadow DOM (e.g. only retrieving .bx--card__wrapper instead).

Another idea is to add event listeners to certain components that would directly modify certain elements, so when a user dispatches events, the component will modify things directly on the component's side.

          exampleCard.dispatchEvent(
            new CustomEvent('edit-heading', {
              bubbles: true,
              composed: true,
              detail: {
                elementTarget: 'dds-card-heading',
               newText: 'this is a new heading'
              },
            })
          );

While this could probably be "easier" on adopters, there might not be a way to generalize this behavior, and worst case scenario we'd have to do this on a case by case basis, which we'd have to take into account if there are ever breaking changes.

The first solution might be a more general one, and provides the shadow DOM to the adopters.

Changelog

New

• {{new thing}}

Changed

• {{changed thing}}

Removed

• {{removed thing}}

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/10087/index.html

Built with commit: 89f105b21ac5a118cc4ea9c184f6d71993511699

[ibmdotcom-bot]

Deploy preview created for package "Carbon Web Components":
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10087/index.html

Built with commit: 89f105b21ac5a118cc4ea9c184f6d71993511699

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10087/index.html

Built with commit: 89f105b21ac5a118cc4ea9c184f6d71993511699

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10087/index.html

Built with commit: 89f105b21ac5a118cc4ea9c184f6d71993511699

[andy-blum]

Due to AEM having a hard time accessing the shadow DOM

I'm curious what you mean by this. Is the AEM software having a hard time accessing this or is it the AEM developers? Why is that information needed?

Also do they need a reference to every instance of the Shadow DOM or just a vague idea of what the render functions put out? If you only need one per class, that kind of information could get wrapped up when the component is defined as part of #10080

[jeffchew]

I'm curious what you mean by this. Is the AEM software having a hard time accessing this or is it the AEM developers? Why is that information needed?

Also do they need a reference to every instance of the Shadow DOM or just a vague idea of what the render functions put out? If you only need one per class, that kind of information could get wrapped up when the component is defined as part of #10080

This is in reference to a request from the Adobe Target team. This issue was originally brought up and closed:
#9630

This request is being brought up again.

[kennylam]

@IgnacioBecerra this can probably be closed, since we're going to be taking a different approach with the Target team?