When I\u2019d go to a conference (when we were able to do such things) and see someone do a presentation on web components, I always thought it was pretty nifty (yes, apparently, I\u2019m from 1950), but it always seemed complicated and excessive. A thousand lines of JavaScript to save four lines of HTML. The speaker would inevitably either gloss over the oodles of JavaScript to get it working or they\u2019d go into excruciating detail and my eyes would glaze over as I thought about whether my per diem covered snacks.<\/p>\n\n\n\n
But in a recent reference project<\/a> to make learning HTML easier (by adding zombies and silly jokes, of course), the completist in me decided I had to cover every HTML element in the spec. Beyond those conference presentations, this was my first introduction to the And I\u2019ve learned something in the process: web components are a lot easier than I remember.<\/strong><\/p>\n\n\n\n\n\n\n Either web components have come a long way since the last time I caught myself daydreaming about snacks at a conference, or I let my initial fear of them get in the way of truly knowing them \u2014 probably both.<\/p>\n\n\n\n I\u2019m here to tell you that you\u2014yes, you<\/em>\u2014can create a web component. Let\u2019s leave our distractions, fears, and even our snacks at the door for a moment and do this together.<\/p>\n\n\n A The Here, we\u2019ve slotted (is that even a word?) the word \u201cZombies\u201d in the templated markup. If we don\u2019t do anything with the slot, it defaults to the content between the tags. That would be \u201cZombies\u201d in this example.<\/p>\n\n\n\n Using The We\u2019re technically done \u201cwriting\u201d the component and can drop it in anywhere we want to use it.<\/p>\n\n\n\n See what we did there? We put the <slot><\/code> and <template><\/code> elements. But as I tried to write something accurate and engaging, I was forced to delve a bit deeper.<\/p>\n\n\n\nArticle series<\/h2>\n\n\n
Let\u2019s start with the
<template><\/code><\/h3>\n\n\n<template><\/code> is an HTML element that allows us to create, well, a template\u2014the HTML structure for the web component. A template doesn\u2019t have to be a huge chunk of code. It can be as simple as:<\/p>\n\n\n\n<template>\n <p>The Zombies are coming!<\/p>\n<\/template><\/code><\/pre>\n\n\n\n<template><\/code> element is important because it holds things together. It\u2019s like the foundation of building; it\u2019s the base from which everything else is built. Let\u2019s use this small bit of HTML as the template for an <apocalyptic-warning><\/code> web component\u2014you know, as a warning when the zombie apocalypse is upon us.<\/p>\n\n\nThen there\u2019s the
<slot><\/code><\/h3>\n\n\n<slot><\/code> is merely another HTML element just like <template><\/code>. But in this case, <slot><\/code> customizes what the <template><\/code> renders on the page.<\/p>\n\n\n\n<template>\n <p>The <slot>Zombies<\/slot> are coming!<\/p>\n<\/template><\/code><\/pre>\n\n\n\n<slot><\/code> is a lot like having a placeholder. We can use the placeholder as is, or define something else to go in there instead. We do that with the name<\/code> attribute.<\/p>\n\n\n\n<template>\n <p>The <slot name=\"whats-coming\">Zombies<\/slot> are coming!<\/p>\n<\/template><\/code><\/pre>\n\n\n\nname<\/code> attribute tells the web component which content goes where in the template. Right now, we\u2019ve got a slot called whats-coming<\/code>. We\u2019re assuming zombies are coming first in the apocalypse, but the <slot><\/code> gives us some flexibility to slot something else in, like if it ends up being a robot, werewolf, or even a web component apocalypse.<\/p>\n\n\nUsing the component<\/h3>\n\n\n
<apocalyptic-warning>\n <span slot=\"whats-coming\">Halitosis Laden Undead Minions<\/span>\n<\/apocalyptic-warning>\n\n<template>\n <p>The <slot name=\"whats-coming\">Zombies<\/slot> are coming!<\/p>\n<\/template><\/code><\/pre>\n\n\n\n<apocalyptic-warning><\/code> component on the page just like any other <div><\/code> or whatever. But we also dropped a <span><\/code> in there that references the name<\/code> attribute of our <slot><\/code>. And what\u2019s between that <span><\/code> is what we want to swap in for \u201cZombies\u201d when the component renders.<\/p>\n\n\n\n