<tag-name> Web Component

Display a string as HTML tag (with Unicode brackets). Because using actual < > brackets would execute the (HTML) Web Component.

Extra functionality: click the tag-name to open the associated link

Example (in green):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hello web-component-tutor in the Web Component World! Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

with attribute tag defining tag-name

web-component-tutor

This is my most offending Web Component:

Loads render blocking before DOM is parsed, for minimal FOUCs
Declares a variable as parameter to save 4 Bytes (let name=)
Uses setTimeout to wait for lightDOM to be parsed
uses shadowDOM so CSS styles do not leak out (or in for that matter)
Writes HTML attribute values without quotes to save Bytes
Uses t & n HTMLUnknownElements for shorter code
No ending </style> tag because its at the end of the shadowRoot, thus closes automagically, again.. saving Bytes

<tag-name> Web Component

Example (in green):

with attribute tag defining tag-name

This is my most offending Web Component:

GZip analysis