Custom Media Element

[luwes]

Custom media element is the successor of https://github.com/muxinc/custom-video-element. It adds a way to easily extend the <audio> element in addition to the <video> element.

Several issues in custom-video-element are fixed in custom-media-element and adds a few new features.

• fixes the bug of attributes not being available in an eagerly upgraded custom video element
• the handling of attributes / properties is different than before in that it doesn't set properties by default in the attribute callback causing a potential endless loop if the override property was not gated e.g. if (this.loop == value) return;
• the observed attributes are limited to a static list that can be added on by the extending class.
• events can be attached before the custom media element is upgraded
• properties can be set before the custom media element is upgraded
• default templates and Events list is overridable
• adds CSS vars for object-fit and captions transform / transition https://github.com/muxinc/custom-media-element/blob/139ef8332396b94b3c54a5c81a8c9da725e93b57/custom-media-element.js#L81-L88
• adds a CSS part video or audio for internal styling
• supports extending a custom built-in (e.g. castable-video)
• browser API's are gated so SSR (e.g. Next.js) doesn't break

[heff]

That's a lot of new features! 🎉 Looks good. 👍 With all the new changes it's probably worth a good round of manual testing.