Web Components Dynamic Slots

Web application components. Before we start, let’s make sure we’re on the same page regarding the key technical web-related terms. Namely, the two structural web app components any web app consists of – client and server sides. A client is a user-friendly representation of a web app’s functionality that a user interacts with.

ES Modules enable web components to be developed in a modular way that is in alignment with other industry accepted implementations for JavaScript application development. You can define the interface of your custom element in a JS file which is then included with an type='module' attribute. ES Module files are merged into one file client side. Shadow DOM slots, composition Many types of components, such as tabs, menus, image galleries, and so on, need the content to render. Just like built-in browser expects items, our may expect the actual tab content to be passed. And a may expect menu items.

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.

Oftentimes you will need to allow your parent Vue components to embed arbitrary content inside of child components. (Angular devs, you know this as transclusion or content projection.) Vue provides an easy way to do this via slots.

Basic Usage

To allow a parent component to pass DOM elements into a child component, provide a <slot></slot> element inside the child component. You can then populate the elements in that slot with <child-component><p>MyParagraph</p></child-component>.

Note: If there is no <slot></slot> element in the child’s template, any content from the parent will be silently discarded.

Fallback Content

Web Components Dynamic Slots App

If the parent does not inject any content into the child’s slot, the child will render any elements inside its <slot></slot> tag, like so:

Named Slots

Having one slot to inject content into is nice and all, but oftentimes it would be preferable to be able to inject various types of content at different locations in the child component. Say you’re making a burger component. You want the top and bottom buns to be predictably at the top and bottom of the burger, (don’t you?) but also want to be able spread things on the bun halves.

Vue allows us to do this by way of named slots. Named slots are simply slots with a name attribute <slot name='slotName'></slot> to allow for namespaced content injection.

Obviously I don’t have a clue as to how to make burgers, but that should at least serve as an understandable guide to Vue slots. Enjoy!

LWC has different lifecycle hooks which are essentially are callback methods triggered at a specific phase of a component instance’s lifecycle.

We are interested in the render() callback method to update the UI conditionally. Render() can be called before or after connectedCallback(). Though it is rare to call the render() in a component it’s main use case is to conditionally render a valid HTML template based on business logic.

Web Components Dynamic Slots Software

For example, imagine that you have a component that can be rendered in two different ways but you don’t want to mix the HTML in one file. Create multiple HTML files in the component bundle. Import them both and add a condition in the render() method to return the correct template depending on the component’s state.

Following the lines of code splitting used in some JavaScript frameworks, one can import multiple HTML templates and write business logic that renders them conditionally. Create multiple HTML files one for web and one for mobile in the component bundle. Import them all and add a condition in the render() method to return the correct template depending on the device the component is accessed. The returned value from the render() method must be a template reference, which is the imported default export from an HTML file.

To reference CSS from an extra template, the CSS filename must match the filename of the extra template. For example, insidersMobileTemplate.html can reference CSS only from insidersMobileTemplate.css. It can’t reference CSS from insidersMultipleTemplates.css or insidersWebTemplate.css.

We can also use an if:true-false directive to render nested templates conditionally instead.

Once we deploy the LWC components you can see the dynamic behavior based on the screen size.