Customisation

Slots

The webcomponent exposes two slots for customising its behaviour:

Default:

html

<slot name="loading">Loading...</slot>

Customised loading state:

html

<email-address src="/images/encoded-email-image.png">
  <span slot="loading">🕘</span>
</email-address>

Here's how it would look like:

By Default this slot shows the email address as text

html

<slot name="link">email@example.com</slot>

This can be customised by providing a custom markup into the link named slot.

html

<email-address src="/images/encoded-email-image.png">
  <span slot="link">Click Here</span>
</email-address>

Here's how it would look like:

The webcomponent can be styled directly using css selector for the defined webcomponent.

html

<email-address src="/vbvfro8215e.png"> </email-address>

css

email-address {
  display: block;
  position: relative;
}

The anchor link element can be styled using ::part() selector

css

email-address::part(link) {
  display: inline-block;
  color: orange;
  text-decoration-style: dotted;
}

Result: