{"id":360665,"date":"2022-01-21T06:08:05","date_gmt":"2022-01-21T14:08:05","guid":{"rendered":"https:\/\/css-tricks.com\/?p=360665"},"modified":"2022-02-28T07:41:25","modified_gmt":"2022-02-28T15:41:25","slug":"context-aware-web-components","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/context-aware-web-components\/","title":{"rendered":"Context-Aware Web Components Are Easier Than You Think"},"content":{"rendered":"\n<p>Another aspect of web components that we haven\u2019t talked about yet is that a JavaScript function is called whenever a web component is added or removed from a page. These lifecycle callbacks can be used for many things, including making an element aware of its context.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"article-series\">Article series<\/h3>\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><\/li><li><a href=\"https:\/\/css-tricks.com\/context-aware-web-components\">Context-Aware Web Components Are Easier Than You Think<\/a> (<em>You are here!<\/em>)<\/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<h3 class=\"wp-block-heading\" id=\"the-four-lifecycle-callbacks-of-web-components\">The four lifecycle callbacks of web components<\/h3>\n\n\n<p>There are <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_custom_elements#using_the_lifecycle_callbacks\" rel=\"noopener\">four lifecycle callbacks<\/a> that can be used with web components:<\/p>\n\n\n\n<ul><li><code>connectedCallback<\/code>: This callback fires when the custom element is <em>attached<\/em> to the element.<\/li><li><code>disconnectedCallback<\/code>: This callback fires when the element is <em>removed<\/em> from the document.<\/li><li><code>adoptedCallback<\/code>: This callback fires when the element is <em>added<\/em> to a new document.<\/li><li><code>attributeChangedCallback<\/code>: This callback fires when an <em>attribute<\/em> is changed, added or removed, as long as that attribute is being observed.<\/li><\/ul>\n\n\n\n<p>Let&#8217;s look at each of these in action.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"our-post-apocalyptic-person-component\">Our post-apocalyptic person component<\/h3>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1520\" height=\"712\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-05-at-1.33.02-PM.png?resize=1520%2C712&#038;ssl=1\" alt=\"Two renderings of the web component side-by-side, the left is a human, and the right is a zombie.\" class=\"wp-image-360671\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-05-at-1.33.02-PM.png?w=1520&amp;ssl=1 1520w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-05-at-1.33.02-PM.png?resize=300%2C141&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-05-at-1.33.02-PM.png?resize=1024%2C480&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-05-at-1.33.02-PM.png?resize=768%2C360&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-05-at-1.33.02-PM.png?resize=1000%2C468&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We\u2019ll start by creating a web component called <code>&lt;postapocalyptic-person&gt;<\/code>. Every person after the apocalypse is either a human or a zombie and we\u2019ll know which one based on a class \u2014 either <code>.human<\/code> or <code>.zombie<\/code> \u2014 that\u2019s applied to the parent element of the <code>&lt;postapocalyptic-person&gt;<\/code> component. We won\u2019t do anything fancy with it (yet), but we\u2019ll add a <code>shadowRoot<\/code> we can use to attach a corresponding image based on that classification.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">customElements.define(\n  \"postapocalyptic-person\",\n  class extends HTMLElement {\n    constructor() {\n      super();\n      const shadowRoot = this.attachShadow({ mode: \"open\" });\n    }\n}<\/code><\/pre>\n\n\n\n<p>Our HTML looks 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 class=\"humans\">\n  &lt;postapocalyptic-person>&lt;\/postapocalyptic-person>\n&lt;\/div>\n&lt;div class=\"zombies\">\n  &lt;postapocalyptic-person>&lt;\/postapocalyptic-person>\n&lt;\/div><\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"inserting-people-with-connectedcallback\">Inserting people with <code>connectedCallback<\/code><\/h3>\n\n\n<p>When a <code>&lt;postapocalyptic-person&gt;<\/code> is loaded on the page, the <code>connectedCallback()<\/code> function is called.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">connectedCallback() {\n  let image = document.createElement(\"img\");\n  if (this.parentNode.classList.contains(\"humans\")) {\n    image.src = \"https:\/\/assets.codepen.io\/1804713\/lady.png\";\n    this.shadowRoot.appendChild(image);\n  } else if (this.parentNode.classList.contains(\"zombies\")) {\n    image.src = \"https:\/\/assets.codepen.io\/1804713\/ladyz.png\";\n    this.shadowRoot.appendChild(image);\n  }\n}<\/code><\/pre>\n\n\n\n<p>This makes sure that an image of a human is output when the <code>&lt;postapocalyptic-person&gt;<\/code> is a human, and a zombie image when the component is a zombie.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYErBJQ\" src=\"\/\/codepen.io\/anon\/embed\/zYErBJQ?height=450&amp;theme-id=1&amp;slug-hash=zYErBJQ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYErBJQ\" title=\"CodePen Embed zYErBJQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">Be careful working with <code>connectedCallback<\/code>. It runs more often than you might realize, firing any time the element is moved and could (baffling-ly) even run <em>after<\/em> the node is no longer connected \u2014 which can be an expensive performance cost. You can use <code>this.isConnected<\/code> to know whether the element is connected or not.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"counting-people-with-connectedcallback-when-they-are-added\">Counting people with <code>connectedCallback()<\/code> when they are added<\/h3>\n\n\n<p>Let&#8217;s get a little more complex by adding a couple of buttons to the mix. One will add a <code>&lt;postapocalyptic-person&gt;<\/code>, using a &#8220;coin flip&#8221; approach to decide whether it\u2019s a human or a zombie. The other button will do the opposite, removing a <code>&lt;postapocalyptic-person&gt;<\/code> at random. We&#8217;ll keep track of how many humans and zombies are in view while we\u2019re at it.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"btns\">\n  &lt;button id=\"addbtn\">Add Person&lt;\/button>\n  &lt;button id=\"rmvbtn\">Remove Person&lt;\/button> \n  &lt;span class=\"counts\">\n    Humans: &lt;span id=\"human-count\">0&lt;\/span> \n    Zombies: &lt;span id=\"zombie-count\">0&lt;\/span>\n  &lt;\/span>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Here\u2019s what our buttons will do:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">let zombienest = document.querySelector(\".zombies\"),\n  humancamp = document.querySelector(\".humans\");\n\ndocument.getElementById(\"addbtn\").addEventListener(\"click\", function () {\n  \/\/ Flips a \"coin\" and adds either a zombie or a human\n  if (Math.random() > 0.5) {\n    zombienest.appendChild(document.createElement(\"postapocalyptic-person\"));\n  } else {\n    humancamp.appendChild(document.createElement(\"postapocalyptic-person\"));\n  }\n});\ndocument.getElementById(\"rmvbtn\").addEventListener(\"click\", function () {\n  \/\/ Flips a \"coin\" and removes either a zombie or a human\n  \/\/ A console message is logged if no more are available to remove.\n  if (Math.random() > 0.5) {\n    if (zombienest.lastElementChild) {\n      zombienest.lastElementChild.remove();\n    } else {\n      console.log(\"No more zombies to remove\");\n    }\n  } else {\n    if (humancamp.lastElementChild) {\n      humancamp.lastElementChild.remove();\n    } else {\n      console.log(\"No more humans to remove\");\n    }\n  }\n});<\/code><\/pre>\n\n\n\n<p>Here\u2019s the code in <code>connectedCallback()<\/code> that counts the humans and zombies as they are added:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">connectedCallback() {\n  let image = document.createElement(\"img\");\n  if (this.parentNode.classList.contains(\"humans\")) {\n    image.src = \"https:\/\/assets.codepen.io\/1804713\/lady.png\";\n    this.shadowRoot.appendChild(image);\n    \/\/ Get the existing human count.\n    let humancount = document.getElementById(\"human-count\");\n    \/\/ Increment it\n    humancount.innerHTML = parseInt(humancount.textContent) + 1;\n  } else if (this.parentNode.classList.contains(\"zombies\")) {\n    image.src = \"https:\/\/assets.codepen.io\/1804713\/ladyz.png\";\n    this.shadowRoot.appendChild(image);\n    \/\/ Get the existing zombie count.\n    let zombiecount = document.getElementById(\"zombie-count\");\n    \/\/ Increment it\n    zombiecount.innerHTML = parseInt(zombiecount.textContent) + 1;\n  }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"updating-counts-with-disconnectedcallback\">Updating counts with <code>disconnectedCallback<\/code><\/h3>\n\n\n<p>Next, we can use <code>disconnectedCallback()<\/code> to decrement the number as a humans and zombies are removed. However, we are unable to check the class of the parent element because the parent element with the corresponding class is already gone by the time <code>disconnectedCallback<\/code> is called. We could set an attribute on the element, or add a property to the object, but since the image\u2019s <code>src<\/code> attribute is already determined by its parent element, we can use that as a proxy for knowing whether the web component being removed is a human or zombie.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">disconnectedCallback() {\n  let image = this.shadowRoot.querySelector('img');\n  \/\/ Test for the human image\n  if (image.src == \"https:\/\/assets.codepen.io\/1804713\/lady.png\") {\n    let humancount = document.getElementById(\"human-count\");\n    humancount.innerHTML = parseInt(humancount.textContent) - 1; \/\/ Decrement count\n  \/\/ Test for the zombie image\n  } else if (image.src == \"https:\/\/assets.codepen.io\/1804713\/ladyz.png\") {\n    let zombiecount = document.getElementById(\"zombie-count\");\n    zombiecount.innerHTML = parseInt(zombiecount.textContent) - 1; \/\/ Decrement count\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWqNjKp\" src=\"\/\/codepen.io\/anon\/embed\/QWqNjKp?height=600&amp;theme-id=1&amp;slug-hash=QWqNjKp&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWqNjKp\" title=\"CodePen Embed QWqNjKp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"beware-of-clowns\">Beware of clowns!<\/h3>\n\n\n<p>Now (and I\u2019m speaking from experience here, of course) the only thing scarier than a horde of zombies bearing down on your position is a clown \u2014 all it takes is one! So, even though we\u2019re already dealing with frightening post-apocalyptic zombies, let\u2019s add the possibility of a clown entering the scene for even more horror. In fact, we\u2019ll do it in such a way that there\u2019s a possibility any human or zombie on the screen is secretly a clown in disguise!<\/p>\n\n\n\n<p>I take back what I said earlier: a single zombie clown is scarier than even a group of &#8220;normal&#8221; clowns. Let\u2019s say that if any sort of clown is found \u2014 be it human or zombie \u2014 we separate them from the human and zombie populations by sending them to a whole different document \u2014 an <code>&lt;iframe&gt;<\/code> jail, if you will. (I hear that &#8220;clowning&#8221; may be even more contagious than zombie contagion.)<\/p>\n\n\n\n<p>And when we move a suspected clown from the current document to an <code>&lt;iframe&gt;<\/code>, it doesn\u2019t destroy and recreate the original node; rather it adopts and connects said node, first calling <code>adoptedCallback<\/code> then <code>connectedCallback<\/code>.<\/p>\n\n\n\n<p>We don\u2019t need anything in the <code>&lt;iframe&gt;<\/code> document except a body with a <code>.clowns<\/code> class. As long as this document is in the iframe of the main document \u2014 not viewed separately \u2014 we don\u2019t even need the <code>&lt;postapocalyptic-person&gt;<\/code> instantiation code. We\u2019ll include one space for humans, another space for zombies, and yes, the clowns\u2019s jail\u2026 errr&#8230; <code>&lt;iframe&gt;<\/code> of&#8230; fun.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"btns\">\n  &lt;button id=\"addbtn\">Add Person&lt;\/button>\n  &lt;button id=\"jailbtn\">Jail Potential Clown&lt;\/button>\n&lt;\/div>\n&lt;div class=\"humans\">\n  &lt;postapocalyptic-person>&lt;\/postapocalyptic-person>\n&lt;\/div>\n&lt;div class=\"zombies\">\n  &lt;postapocalyptic-person>&lt;\/postapocalyptic-person>\n&lt;\/div>\n&lt;iframe class=\"clowniframeoffun\u201d src=\"adoptedCallback-iframe.html\">\n&lt;\/iframe><\/code><\/pre>\n\n\n\n<p>Our &#8220;Add Person&#8221; button works the same as it did in the last example: it flips a digital coin to randomly insert either a human or a zombie. When we hit the &#8220;Jail Potential Clown&#8221; button another coin is flipped and takes either a zombie or a human, handing them over to <code>&lt;iframe&gt;<\/code> jail.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">document.getElementById(\"jailbtn\").addEventListener(\"click\", function () {\n  if (Math.random() > 0.5) {\n    let human = humancamp.querySelector('postapocalyptic-person');\n    if (human) {\n      clowncollege.contentDocument.querySelector('body').appendChild(document.adoptNode(human));\n    } else {\n      console.log(\"No more potential clowns at the human camp\");\n    }\n  } else {\n    let zombie = zombienest.querySelector('postapocalyptic-person');\n    if (zombie) {\n      clowncollege.contentDocument.querySelector('body').appendChild(document.adoptNode(zombie));\n    } else {\n      console.log(\"No more potential clowns at the zombie nest\");\n    }\n  }\n});<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"revealing-clowns-with-adoptedcallback\">Revealing clowns with <code>adoptedCallback<\/code><\/h3>\n\n\n<p>In the <code>adoptedCallback<\/code> we\u2019ll determine whether the clown is of the zombie human variety based on their corresponding image and then change the image accordingly. <code>connectedCallback<\/code> will be called after that, but we don\u2019t have anything it needs to do, and what it does won\u2019t interfere with our changes. So we can leave it as is.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">adoptedCallback() {\n  let image = this.shadowRoot.querySelector(\"img\");\n  if (this.parentNode.dataset.type == \"clowns\") {\n    if (image.src.indexOf(\"lady.png\") != -1) { \n      \/\/ Sometimes, the full URL path including the domain is saved in `image.src`.\n      \/\/ Using `indexOf` allows us to skip the unnecessary bits. \n      image.src = \"ladyc.png\";\n      this.shadowRoot.appendChild(image);\n    } else if (image.src.indexOf(\"ladyz.png\") != -1) {\n      image.src = \"ladyzc.png\";\n      this.shadowRoot.appendChild(image);\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<iframe loading=\"lazy\" title=\"Humans and Zombies Web Component Demo\" src=\"https:\/\/undead.institute\/files\/adoptedCallback\/index.html\" width=\"800\" height=\"600\"><\/iframe>\n\n\n<h3 class=\"wp-block-heading\" id=\"detecting-hidden-clowns-with-attributechangedcallback\">Detecting hidden clowns with <code>attributeChangedCallback<\/code><\/h3>\n\n\n<p>Finally, we have the <code>attributeChangedCallback<\/code>. Unlike the the other three lifecycle callbacks, we need to observe the attributes of our web component in order for the the callback to fire. We can do this by adding an <code>observedAttributes()<\/code> function to the custom element\u2019s class and have that function return an array of attribute names.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">static get observedAttributes() {\n  return [\u201cattribute-name\u201d];\n}<\/code><\/pre>\n\n\n\n<p>Then, if that attribute changes \u2014 including being added or removed \u2014 the <code>attributeChangedCallback<\/code> fires.<\/p>\n\n\n\n<p>Now, the thing you have to worry about with clowns is that some of the humans you know and love (or the ones that you knew and loved before they turned into zombies) could secretly be clowns in disguise. I\u2019ve set up a clown detector that looks at a group of humans and zombies and, when you click the &#8220;Reveal Clowns&#8221; button, the detector will (through completely scientific and totally trustworthy means that are <strong>not<\/strong> based on random numbers choosing an index) apply <code>data-clown=\"true\"<\/code> to the component. And when this attribute is applied, <code>attributeChangedCallback<\/code> fires and updates the component\u2019s image to uncover their clownish colors.<\/p>\n\n\n\n<p>I should also note that the <code>attributeChangedCallback<\/code> takes three parameters:<\/p>\n\n\n\n<ul><li>the name of the attribute<\/li><li>the previous value of the attribute<\/li><li>the new value of the attribute<\/li><\/ul>\n\n\n\n<p>Further, the callback lets you make changes based on how much the attribute has changed, or based on the transition between two states.<\/p>\n\n\n\n<p>Here\u2019s our <code>attributeChangedCallback<\/code> code:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">attributeChangedCallback(name, oldValue, newValue) {\n  let image = this.shadowRoot.querySelector(\"img\");\n  \/\/ Ensures that `data-clown` was the attribute that changed,\n  \/\/ that its value is true, and that it had an image in its `shadowRoot`\n  if (name=\"data-clown\" &amp;&amp; this.dataset.clown &amp;&amp; image) {\n    \/\/ Setting and updating the counts of humans, zombies,\n    \/\/ and clowns on the page\n    let clowncount = document.getElementById(\"clown-count\"),\n    humancount = document.getElementById(\"human-count\"),\n    zombiecount = document.getElementById(\"zombie-count\");\n    if (image.src.indexOf(\"lady.png\") != -1) {\n      image.src = \"https:\/\/assets.codepen.io\/1804713\/ladyc.png\";\n      this.shadowRoot.appendChild(image);\n      \/\/ Update counts\n      clowncount.innerHTML = parseInt(clowncount.textContent) + 1;\n      humancount.innerHTML = parseInt(humancount.textContent) - 1;\n    } else if (image.src.indexOf(\"ladyz.png\") != -1) {\n      image.src = \"https:\/\/assets.codepen.io\/1804713\/ladyzc.png\";\n      this.shadowRoot.appendChild(image);\n      \/\/ Update counts\n      clowncount.innerHTML = parseInt(clowncount.textContent) + 1;\n      zombiecount.innerHTML = parseInt(zombiecount.textContent) - 1;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzrWdvW\" src=\"\/\/codepen.io\/anon\/embed\/YzrWdvW?height=900&amp;theme-id=1&amp;slug-hash=YzrWdvW&amp;default-tab=result\" height=\"900\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzrWdvW\" title=\"CodePen Embed YzrWdvW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And there you have it! Not only have we found out that web component callbacks and creating context-aware custom elements are easier than you may have thought, but detecting post-apocalyptic clowns, though terrifying, is also easier that you thought. What kind of devious, post-apocalyptic clowns can you detect with these web component callback functions?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Another aspect of web components that we haven\u2019t talked about yet is that a JavaScript function is called whenever a web component is added or removed from a page. These lifecycle callbacks can be used for many things, including making an element aware of its context.<\/p>\n","protected":false},"author":271656,"featured_media":360690,"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":"Here's a fun zombie (and clown!)-filled one from @storykaboom showing how lifecycle callbacks work with web components.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[19017,803],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/human-zombie-web-components.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/human-zombie-web-components.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/360665"}],"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=360665"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/360665\/revisions"}],"predecessor-version":[{"id":364375,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/360665\/revisions\/364375"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/360690"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=360665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=360665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=360665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}