# Slots and Properties and Attributes, Oh My! This article is the second in my [series on building Web Components](https://toddesposito.com/series/web-components), and builds on what I started in [Building A Loading Modal Component](https://toddesposito.com/building-a-loading-modal-component). If you haven't seen that one yet, you may want to give it a quick read to catch yourself up. ## Making our component more flexible So we have a working component. Great. But, as written, it isn't flexible enough to be of use as a general purpose tool. We'll tackle this in a couple steps. In this article, we'll dive into three aspects of Web Components: - **Slots** allow us to put content inside our component - **Attributes** allow us to configure our component in the HTML tag - **Properties** allow us to interact with our component in JavaScript In an upcoming article, we'll discuss how to alter the styling of the component. Patience is a virtue. ## First round of improvements Let's review our "proof of concept" page: ```HTML

some content here

``` As you'll recall from the previous article, we load the Component via `

some content here

Please Wait

We're loading your report. This could take a moment.

``` ## Properties What if we want to know if the component is currently visible? **Properties** to the rescue. Properties are component values available to your page's scripts. **PLEASE NOTE:** Properties often look like Attributes, and they can be confused, but they are different things for (often overlapping) purposes. Let's add this code to the component: ```JavaScript get visible() { return this.hasAttribute("visible") } ``` Now, you can go to your browser's console and type: `document.getElementsByTagName('eh-loading-modal')[0].visible` You should get back `true` EVEN IF THE MODAL ISN'T CURRENTLY SHOWING! Why? Because we added the `visible` _attribute_ to the HTML, so it's ALWAYS there. How do we address this? We could: * ignore the attribute and just maintain some internal state * inspect the classList of the controlling `div` * add and remove the attribute like native DOM nodes do If you toggle an HTML checkbox, you'll notice the `checked` attribute is added to or removed from the DOM node. We should probably emulate that behavior, so let's go with that last one. ### Relating Properties to Attributes We need to connect our `visible` property to our `visible` attribute, and then use that connection to drive our component's operation. First, we'll add a "setter" along side our "getter" for `visible`: ```JavaScript get visible() { return this.hasAttribute("visible") } set visible(v) { if (v) { this.setAttribute("visible", "") } else { this.removeAttribute("visible") } } ``` Now, in the console you can type `document.getElementsByTagName('eh-loading-modal')[0].visible = true` to add the attribute, and `document.getElementsByTagName('eh-loading-modal')[0].visible = false` to remove it. And we should probably update `show()` and `hide()` to manipulate the attribute, since that's now how we want to effect the behavior: ```JavaScript show() { this.setAttribute("visible", "") } hide() { this.removeAttribute("visible") } ``` But this still doesn't complete the job, because just toggling the attribute on the node doesn't cause the component to DO anything. We need to make that attribute "observed" and then attach a callback to the component which implements the intended behavior. Let's add: ```JavaScript static get observedAttributes() { return ["visible"] } attributeChangedCallback(name, oldValue, newValue) { switch (name) { case 'visible': if (newValue === null) { this.shadowRoot.getElementById('loading').classList.remove("visible") } else { this.shadowRoot.getElementById('loading').classList.add("visible") } break } } ``` The browser calls `attributeChangedCallback()` every time one of the attributes indicated by `observedAttributes()` is changed. So when our `visible` attribute is added or removed, `attributeChangedCallback()` is called with the attribute name, the previoius value of the attribute, and the new value. ## Better, but more to do So now we have a loading modal component which we can make visible by default via HTML attribute, fill with arbitrary content in the HTML, and interrogate with JavaScript to see if it's visible. That's really nice. But wouldn't it be great to alter the colors, fonts, and layout? Next time, we'll add those capabilities and discuss some design decisions which impact how useful a component will become.