Skip to main content

/ Treasa Ní Chonchúir

The <custom-emoji> element

(One of the custom elements I use around here.)

Sometimes you’d like to use an emoji but for one small problem: it doesn’t exist. That’s where the <custom-emoji> custom element comes in.

Table of Contents

  1. Usage
  2. How it works

Usage

As with any custom element, the close tag cannot be omitted.

Don’t forget to close your custom elements!
<custom-emoji>…</custom-emoji>

The element should have one child, an <img> or <svg> element:

<custom-emoji> wraps an image
<custom-emoji><img src=/images/hanko.svg alt="A red circle encloses the characters ’康特蘇’."></custom-emoji>
Rendering

The above snippet gets rendered like this: A red circle encloses the characters ’康特蘇’. Here are some other examples: EJ and me at Filoli.An abstract, head-on drawing of an old camera.A yellow rose.

They automatically take on the correct size for the text they’re in:

Auto-sizing

Some big text A red circle encloses the characters ’康特蘇’.EJ and me at Filoli.An abstract, head-on drawing of an old camera.A yellow rose.

How it works

It’s pretty much the simplest thing. The JavaScript that defines the custom element doesn’t actually do anything at all.

How it works: element.css
custom-emoji {
    display: inline-block;
    height: 1ic;
    width: 1ic;
    margin: 0;
    padding: 0;
}

custom-emoji > img, custom-emoji > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: 1;
    vertical-align: -10%;
}