Some improvement ideas

[knowler]

Usually I like to keep PRs scoped smaller, but I had some ideas to enhance/improve the initial implementation. Not all the changes herein are intentional.

First off, I thought that we could support both types of toot URLs (see code for examples). To do this, I am using the URL Pattern API which is only supported in Chromium. We could always use regex to do this. I’m getting the toot ID to just make API url for it. You’ll notice I was lazy with my TypeScript here.

Second, I thought we could use ElementInternals to improve the accessibility. I didn’t check what Tweet embeds do which might have been a better guide. Instead, I used a Tweet/Toot from the timeline as my reference point. Both use the <article> element and corresponding role and then create the label from selected text content inside of the post.

Third, I did move the setting of the ShadowRoot.innerHTML to the #render method, since I just found it nicer when adding all of the content. We could always move it back.

Finally, there’s an initial flash of unpleasant styling when none of the content exists. I used a CustomStateSet pseudo-selector (i.e. --loading) to avoid this. We could always repurpose this for an actual loading state.

Anyway, I thought I’d make a draft out of this. I could always break this into smaller PRs as well. I made a pen where I was experimenting with some styling: https://codepen.io/knowler/pen/oNMvYwm. I only made progress on the dark mode styling. The pen has slightly different code than this PR.

[knowler]

Oooo, and we could make use of <spoiler-text> too!

[keithamus]

These changes look great! Let's add them in 😄