Webcomponents are separate from HAX. HAX (headless authoring experience) is just one interface to develop a website using webcomponents.
Webcomponents work across platforms. That means that you can take content you develop using webcomponents and re-use it other websites. It doesn't matter if you're using Drupal, Wordpress, or raw html. As long as the appropriate statements are included in the head of the page, the webcomponents should function appropriately.
Webcomponents themselves are html tags with different attributes. For the quote above, for example:
"lrndesign-blockquote" is the html tag, and "display-mode" and "citation" are the attributes. Javascript (stored externally to the webpage) finds these tags and applies the associated images and styles.
Webcomponents are used throughout industry. Google has a page here discussing best practices. Most are stored online through Github's code repository and can be installed through NPM .
At Penn State, webcomponents associated with HAX are also stored on a CDN, or content delivery network, that other Penn State sites can access. This is basically a bucket that authorized developers can upload official webcomponent releases to. That way, individual web developers don't need to worry about updating javascript, they can point to the PSU CDN.