{"id":350889,"date":"2021-09-03T07:21:38","date_gmt":"2021-09-03T14:21:38","guid":{"rendered":"https:\/\/css-tricks.com\/?p=350889"},"modified":"2022-02-28T07:41:00","modified_gmt":"2022-02-28T15:41:00","slug":"supercharging-built-in-elements-with-web-components-is-easier-than-you-think","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/supercharging-built-in-elements-with-web-components-is-easier-than-you-think\/","title":{"rendered":"Supercharging Built-In Elements With Web Components &#8220;is&#8221; Easier Than You Think"},"content":{"rendered":"\n<p>We\u2019ve already discussed how creating <a href=\"https:\/\/css-tricks.com\/web-components-are-easier-than-you-think\/\">web components is easier than you think<\/a>, but there\u2019s another aspect of the specification that we haven\u2019t discussed yet and it\u2019s a way to customize (nay, <em>supercharge<\/em>) a built-in element. It\u2019s similar to creating fully custom or \u201cautonomous\u201d elements\u2009\u2014\u2009like the <code>&lt;zombie-profile&gt;<\/code> element from the previous articles\u2014but requires a few differences.<\/p>\n\n\n\n<!--more-->\n\n\n<h2 class=\"wp-block-heading\" id=\"article-series\">Article series<\/h2>\n\n\n<ul class=\"is-style-almanac-list\"><li><a href=\"https:\/\/css-tricks.com\/web-components-are-easier-than-you-think\/\">Web Components Are Easier Than You Think<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/interactive-web-components-are-easier-than-you-think\/\">Interactive Web Components Are Easier Than You Think<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/using-web-components-in-wordpress-is-easier-than-you-think\/\">Using Web Components in WordPress is Easier Than You Think<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/supercharging-built-in-elements-with-web-components-is-easier-than-you-think\/\">Supercharging Built-In Elements With Web Components &#8220;is&#8221; Easier Than You Think<\/a> <em>(You are here)<\/em><\/li><li><a href=\"https:\/\/css-tricks.com\/context-aware-web-components\">Context-Aware Web Components Are Easier Than You Think<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/web-component-pseudo-classes-and-pseudo-elements\">Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think<\/a><\/li><\/ul>\n\n\n\n<p>Customized built-in elements use an <code>is<\/code> attribute to tell the browser that this built-in element is no mild-mannered, glasses-wearing element from Kansas, but is, in fact, the faster than a speeding bullet, ready to save the world, element from planet Web Component. (No offense intended, Kansans. You\u2019re super too.)<\/p>\n\n\n\n<p>Supercharging a mild-mannered element not only gives us the benefits of the element\u2019s formatting, syntax, and built-in features, but we also get an element that search engines and screen readers already know how to interpret. The screen reader has to guess what\u2019s going on in a <code>&lt;my-func&gt;<\/code> element, but has some idea of what\u2019s happening in a <code>&lt;nav is=\"my-func\"&gt;<\/code> element. (If you have func, please, for the love of all that is good, <em>don\u2019t<\/em> put it in an element. Think of the children.)<\/p>\n\n\n\n<p>It\u2019s important to note here that Safari (and a handful of more niche browsers) only support autonomous elements and not these customized built-in elements. We\u2019ll discuss polyfills for that later.<\/p>\n\n\n\n<p>Until we get the hang of this, let\u2019s start by rewriting the <code>&lt;apocalyptic-warning&gt;<\/code> element we created back in our <a href=\"https:\/\/css-tricks.com\/web-components-are-easier-than-you-think\/\">first article<\/a> as a customized built-in element. (The code is also <a href=\"https:\/\/codepen.io\/undeadinstitute\/pen\/wvodjjY\" rel=\"noopener\">available in the CodePen demo<\/a>.)<\/p>\n\n\n\n<p>The changes are actually fairly simple. Instead of extending the generic <code>HTMLElement<\/code>, we\u2019ll extend a specific element, in this case the <code>&lt;div&gt;<\/code> element which has the class <code>HTMLDivElement<\/code>. We\u2019ll also add a third argument to the <code>customElements.defines<\/code> function: <code>{extends: 'div'}<\/code>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"3,14\"><code markup=\"tt\">customElements.define(\n  \"apocalyptic-warning\",\n  class ApocalypseWarning extends HTMLDivElement {\n    constructor() {\n      super();\n      let warning = document.getElementById(\"warningtemplate\");\n      let mywarning = warning.content;\n\n      const shadowRoot = this.attachShadow({ mode: \"open\" }).appendChild(\n        mywarning.cloneNode(true)\n      );\n    }\n  },\n  { extends: \"div\" }\n);<\/code><\/pre>\n\n\n\n<p>Lastly, we\u2019ll update our HTML from <code>&lt;apocalyptic-warning&gt;<\/code> tags to <code>&lt;div&gt;<\/code> tags that include an <code>is<\/code> attribute set to \u201capocalyptic-warning\u201d like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div is=\"apocalyptic-warning\">\n  &lt;span slot=\"whats-coming\">Undead&lt;\/span>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Reminder: If you&#8217;re looking at the below in Safari, you won&#8217;t see any beautiful web component goodness *shakes fist at Safari* <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdmawJK\" src=\"\/\/codepen.io\/anon\/embed\/mdmawJK?height=450&amp;theme-id=1&amp;slug-hash=mdmawJK&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdmawJK\" title=\"CodePen Embed mdmawJK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Only certain elements can have a shadow root attached to them. Some of this is because attaching a shadow root to, say, an <code>&lt;a&gt;<\/code> element or <code>&lt;form&gt;<\/code> element could have security implications. The list of available elements is mostly layout elements, such as <code>&lt;article&gt;<\/code>, <code>&lt;section&gt;<\/code>, <code>&lt;aside&gt;<\/code>, <code>&lt;main&gt;<\/code>, <code>&lt;header&gt;<\/code>, <code>&lt;div&gt;<\/code>, <code>&lt;nav&gt;<\/code>, and <code>&lt;footer&gt;<\/code>, plus text-related elements like <code>&lt;p&gt;<\/code>, <code>&lt;span&gt;<\/code>, <code>&lt;blockquote&gt;<\/code>, and <code>&lt;h1&gt;<\/code>&#8211;<code>&lt;h6&gt;<\/code>. Last but not least, we also get the body element and any valid autonomous custom element.<\/p>\n\n\n\n<p>Adding a shadow root is not the only thing we can do to create a web component. At its base, a web component is a way to bake functionality into an element and we don\u2019t need additional markup in the shadows to do that. Let\u2019s create an image with a built-in light box feature to illustrate the point.<\/p>\n\n\n\n<p>We\u2019ll take a normal <code>&lt;img&gt;<\/code> element and add two attributes: first, the <code>is<\/code> attribute that signifies this <code>&lt;img&gt;<\/code> is a customized built-in element; and a data attribute that holds the path to the larger image that we\u2019ll show in the light box. (Since I\u2019m using an SVG, I just used the same URL, but you could easily have a smaller raster image embedded in the site and a larger version of it in the light box.)<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img is=\"light-box\" src=\"https:\/\/assets.codepen.io\/1804713\/ninja2.svg\" data-lbsrc=\"https:\/\/assets.codepen.io\/1804713\/ninja2.svg\" alt=\"Silent but Undeadly Zombie Ninja\" \/><\/code><\/pre>\n\n\n\n<p>Since we can\u2019t do a shadow DOM for this <code>&lt;img&gt;<\/code>, there\u2019s no need for a <code>&lt;template&gt;<\/code> element, <code>&lt;slot&gt;<\/code> elements, or any of those other things. We also won\u2019t have any encapsulated styles.<\/p>\n\n\n\n<p>So, let\u2019s skip straight to the JavaScript:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">customElements.define(\n  \"light-box\",\n  class LightBox extends HTMLImageElement {\n    constructor() {\n      super();\n      \/\/ We\u2019re creating a div element to use as the light box. We\u2019ll eventually insert it just before the image in question.\n      let lb = document.createElement(\"div\");\n      \/\/ Since we can\u2019t use a shadow DOM, we can\u2019t encapsulate our styles there. We could add these styles to the main CSS file, but they could bleed out if we do that, so I\u2019m setting all styles for the light box div right here\n      lb.style.display = \"none\";\n      lb.style.position = \"absolute\";\n      lb.style.height = \"100vh\";\n      lb.style.width = \"100vw\";\n      lb.style.top = 0;\n      lb.style.left = 0;\n      lb.style.background =\n        \"rgba(0,0,0, 0.7) url(\" + this.dataset.lbsrc + \") no-repeat center\";\n      lb.style.backgroundSize = \"contain\";\n\n      lb.addEventListener(\"click\", function (evt) {\n        \/\/ We\u2019ll close our light box by clicking on it\n        this.style.display = \"none\";\n      });\n      this.parentNode.insertBefore(lb, this); \/\/ This inserts the light box div right before the image\n      this.addEventListener(\"click\", function (evt) {\n        \/\/ Opens the light box when the image is clicked.\n        lb.style.display = \"block\";\n      });\n    }\n  },\n  { extends: \"img\" }\n);<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdmodKK\" src=\"\/\/codepen.io\/anon\/embed\/mdmodKK?height=450&amp;theme-id=1&amp;slug-hash=mdmodKK&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdmodKK\" title=\"CodePen Embed mdmodKK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now that we know how customized built-in elements work, we need to move toward ensuring they\u2019ll work <em>everywhere<\/em>. Yes, Safari, this stink eye is for you.<\/p>\n\n\n\n<p><a href=\"http:\/\/Webcomponents.org\" rel=\"noopener\">WebComponents.org<\/a> has a generalized polyfill that handles both customized built-in elements and autonomous elements, but because it can handle so much, it may be a lot more than you need, particularly if all you\u2019re looking to do is support customized built-in elements in Safari.<\/p>\n\n\n\n<p>Since Safari supports autonomous custom elements, we can swap out the <code>&lt;img&gt;<\/code> with an autonomous custom element such as <code>&lt;lightbox-polyfill&gt;<\/code>. &#8220;This will be like two lines of code!&#8221; the author naively said to himself. Thirty-seven hours of staring at a code editor, two mental breakdowns, and a serious reevaluation of his career path later, he realized  that he&#8217;d need to start typing if he wanted to write those two lines of code. It also ended up being more like sixty lines of code (but you&#8217;re probably good enough to do it in like ten lines).<\/p>\n\n\n\n<p>The original code for the light box can mostly stand as-is (although we\u2019ll add a new autonomous custom element shortly), but it needs a few small adjustments. Outside the definition of the custom element, we need to set a Boolean.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">let customBuiltInElementsSupported = false;<\/code><\/pre>\n\n\n\n<p>Then within the <code>LightBox<\/code> constructor, we set the Boolean to <code>true<\/code>. If customized built-in elements aren\u2019t supported, the constructor won\u2019t run and the Boolean won\u2019t be set to <code>true<\/code>; thus we have a direct test for whether customized built-in elements are supported.<\/p>\n\n\n\n<p>Before we use that test to replace our customized built-in element, we need to create an autonomous custom element to be used as a polyfill, namely <code>&lt;lightbox-polyfill&gt;<\/code>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">customElements.define(\n  \"lightbox-polyfill\", \/\/ We extend the general HTMLElement instead of a specific one\n  class LightBoxPoly extends HTMLElement { \n    constructor() {\n      super();\n\n      \/\/ This part is the same as the customized built-in element\u2019s constructor\n      let lb = document.createElement(\"div\");\n      lb.style.display = \"none\";\n      lb.style.position = \"absolute\";\n      lb.style.height = \"100vh\";\n      lb.style.width = \"100vw\";\n      lb.style.top = 0;\n      lb.style.left = 0;\n      lb.style.background =\n        \"rgba(0,0,0, 0.7) url(\" + this.dataset.lbsrc + \") no-repeat center\";\n      lb.style.backgroundSize = \"contain\";\n\n      \/\/ Here\u2019s where things start to diverge. We add a `shadowRoot` to the autonomous custom element because we can\u2019t add child nodes directly to the custom element in the constructor. We could use an HTML template and slots for this, but since we only need two elements, it's easier to just create them in JavaScript.\n      const shadowRoot = this.attachShadow({ mode: \"open\" });\n\n      \/\/ We create an image element to display the image on the page\n      let lbpimg = document.createElement(\"img\");\n\n      \/\/ Grab the `src` and `alt` attributes from the autonomous custom element and set them on the image\n      lbpimg.setAttribute(\"src\", this.getAttribute(\"src\"));\n      lbpimg.setAttribute(\"alt\", this.getAttribute(\"alt\"));\n\n      \/\/ Add the div and the image to the `shadowRoot`\n      shadowRoot.appendChild(lb);\n      shadowRoot.appendChild(lbpimg);\n\n      \/\/ Set the event listeners so that you show the div when the image is clicked, and hide the div when the div is clicked.\n      lb.addEventListener(\"click\", function (evt) {\n        this.style.display = \"none\";\n      });\n      lbpimg.addEventListener(\"click\", function (evt) {\n        lb.style.display = \"block\";\n      });\n    }\n  }\n);<\/code><\/pre>\n\n\n\n<p>Now that we have the autonomous element ready, we need some code to replace the customized <code>&lt;img&gt;<\/code> element when it\u2019s unsupported in the browser.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">if (!customBuiltInElementsSupported) {\n  \/\/ Select any image with the `is` attribute set to `light-box`\n  let lbimgs = document.querySelectorAll('img[is=\"light-box\"]');\n  for (let i = 0; i &lt; lbimgs.length; i++) { \/\/ Go through all light-box images\n    let replacement = document.createElement(\"lightbox-polyfill\"); \/\/ Create an autonomous custom element\n\n    \/\/ Grab the image and div from the `shadowRoot` of the new lighbox-polyfill element and set the attributes to those originally on the customized image, and set the background on the div.\n    replacement.shadowRoot.querySelector(\"img\").setAttribute(\"src\", lbimgs[i].getAttribute(\"src\"));\n    replacement.shadowRoot.querySelector(\"img\").setAttribute(\"alt\", lbimgs[i].getAttribute(\"alt\"));\n    replacement.shadowRoot.querySelector(\"div\").style.background =\n      \"rgba(0,0,0, 0.7) url(\" + lbimgs[i].dataset.lbsrc + \") no-repeat center\";\n\n    \/\/ Stick the new lightbox-polyfill element into the DOM just before the image we\u2019re replacing\n    lbimgs[i].parentNode.insertBefore(replacement, lbimgs[i]);\n    \/\/ Remove the customized built-in image\n    lbimgs[i].remove();\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYzOjOM\" src=\"\/\/codepen.io\/anon\/embed\/zYzOjOM?height=450&amp;theme-id=1&amp;slug-hash=zYzOjOM&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYzOjOM\" title=\"CodePen Embed zYzOjOM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>So there you have it! We not only built autonomous custom elements, but <em>customized<\/em> built-in elements as well\u2009\u2014\u2009including how to make them work in Safari. And we get all the benefits of structured, semantic HTML elements to boot including giving screen readers and search engines an idea of what these custom elements are.<\/p>\n\n\n\n<p>Go forth and customize yon built-in elements with impunity!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve already discussed how creating web components is easier than you think, but there\u2019s another aspect of the specification that we haven\u2019t discussed yet and it\u2019s a way to customize (nay, supercharge) a built-in element. It\u2019s similar to creating fully custom or \u201cautonomous\u201d elements\u2009\u2014\u2009like the &lt;zombie-profile&gt; element from the previous articles\u2014but requires a few differences.<\/p>\n","protected":false},"author":271656,"featured_media":335069,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"@storykaboom on extending web components to native elements.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[803],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/zombie-custom-web-component.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/zombie-custom-web-component.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350889"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/271656"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=350889"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350889\/revisions"}],"predecessor-version":[{"id":364374,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/350889\/revisions\/364374"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/335069"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=350889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=350889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=350889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}