Use CustomElements for cards

[ibnesayeed]

If these cards are intended to be used in other sites, it might be a good idea to utilize HTML CustomElements for bi-directional style isolation. We are using it in Reconstructive Banner. Here are some other resources that will help you get started with this fairly new HTML standard.

• https://www.html5rocks.com/en/tutorials/webcomponents/customelements/
• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

[machawk1]

Custom Element support appears to be lacking: https://caniuse.com/#feat=custom-elements

Maybe feature detect to serve a Custom Elements version and fallback to the current version until more browsers support them.

[ibnesayeed]

The situation is not as bad because support for draft v1 (as opposed to v0) has landed in Safari as well https://caniuse.com/#feat=custom-elementsv1. Current global reach of browsers that support CustomElements is almost 80%. Partial support is not an issue as we will not be using currently unsupported features anyway. Firefox has it available behind a flag and intends to enable it by default in it v61 release (though it missed its plans to enable it by default in v60). Edge browser is considering it, but that is not as significant.

As far as fallback option is concerned, we can use iframes as a fallback and if we want to reuse the markup, we can perhaps utilize well-supported HTML templates to conditionally clone the content into an iframe or a custom element (I am not too sure about the possibility of this reuse, but just thinking out loud here).

[shawnmjones]

I have 3 main concerns with custom elements:

1. accessibility - How do screen readers deal with them? You'll note that the card I've created degrades to just a text snippet and a title for the benefit of screen readers.
2. browser support - this is addressed in the conversation above
3. archivability - I've actually considered ditching the JavaScript rendering altogether in favor of archive-friendly HTML. One of my goals is that these cards should not hinder the page's archivability. How well do the custom elements function in this environment?

I think it's a great idea. I'd just like to see it mature some more.

[ibnesayeed]

Those are legitimate concerns and I think we can check all those boxes with growing confidence going forward.

• Accessibility - Web Components' community is well aware of this necessity and working towards this while the use of CustomElements is growing rapidly. @robdodson from Google has some great insights on this topic. His tutorials and talks on the matter are everywhere. His recent blog post The future of accessibility for custom elements addresses this very question.
• Browser Support - The future is bright!
• Archivability - Even the Internet Archive, one of the archives that purely rely on Heritrix for crawling (which unlike headless browser-based crawlers, does not execute JS), can preserve and replay CustomElements (see this example). These custom elements are generally defined in a JS file that is loaded like any other JS on the page. Their inclusion has nothing magical that would be any different for tools that perform static markup analysis for frontier building (such as Wget and Heritrix). Once that script is loaded, be it from the live site or an archive, it is now the responsibility of the browser to understand it and render it properly. So, basically what would not work is if you try to reply it in an old browser (for example in services like OldWeb.today).

[shawnmjones]

I spoke with @phonedude about this issue today and the biggest concern at the moment is browser support.

I am keeping this issue open so that development can begin on it once Custom Elements is more widely supported by browsers.

[ibnesayeed]

the biggest concern at the moment is browser support.

As I noted before, there is actually a pretty good native browser support already (as far as the market share is concerned). For remaining browsers like Firefox and Edge, there are polyfills available. Firefox is about to make it generally available (not behind a flag) soon. Look at the browser support matrix on the official site of Web Components.

[shawnmjones]

I may make this an option for the user, depending on the priority of other issues. A web page author should be aware of their audience and may not care about supporting certain browsers (like Edge).

[ibnesayeed]

Firefox 63, publicly released last month, now supports custom elements by default, hence a relevant issue in IPWB https://github.com/oduwsdl/ipwb/issues/433 is now closed.

[shawnmjones]

Thank you for letting me know. I'll look into a CustomElements implementation soon.