Developing an oEmbed component with WebComponents and what I learned

I developed and released an oEmbed component with WebComponents.

I would like to list what I learned during the development.

Starter Kit

When developing Web Components, it seems good to use one of the following starter kits.

Even without these, you can develop Web Components, but to write in Typescript or to test, you need a certain amount of preparation. Therefore, if you want to increase the initial speed of development, use a starter kit.

Or, you might appreciate the benefits of using a starter kit after first creating Web Components with just plain Javascript.

Personally, I recommend open-wc. Because it has the following tools.

Testing
Demoing
Building
Linting

Of course, it also supports Typescript.

Catch Up

To catch up on what Web Components are, the MDN site is a good reference.

Web Components | MDN

There is also a Japanese specification for WebComponents (Custom Elements).

HTML Standard — Custom elements (Japanese translation)

The implementation code for the rendering engine blink in Chromium, which is in Chrome, is also available.

chromium/third_party/blink/renderer/core/html/custom/README.md

Best Practices

Google has published best practices for Custom Elements.

Custom Element Best Practices | Web Fundamentals | Google Developers

For example

Always accept primitive data (strings, numbers, booleans) as either attributes or properties.

As stated above, only pass primitive data to HTML attributes. Rich data like objects and arrays need to be serialized and lose object references.

Testing

To write tests for Web Components, you need to support Shadow DOM. You can use a library that wraps the browser API like JSDOM, but it is more appropriate to use a headless browser. Therefore, @web/test-runner is useful. This test library is one of the same Modern Web as open-wc. @web/test-runner supports Puppeteer, Playwright, and Selenium.