[{"_id":"stencil-check-for-use-of-named-slot","title":"StencilJS - Check for Use of Named Slot","subtitle":"","description":"How to determine if a named slot is being used with code in a Stencil web component. ","body":"

\n Within a Stencil web component, you may sometimes need to determine, with code, whether or not a named slot is being used. \n I had this need recently, for example, in a layout component that had to render a unique DOM and use unique CSS class names \n depending on the named slots that were being used. In this post, I'm sharing how to do it. \n

\n\n

You need, first of all, to import the Element decorator within the @stencil/core imports as shown below:

\n\nimport { Component, Element, Host, h} from '@stencil/core';\n\n

Now, you can use the Element decorator within your code to gain access to the host element, like this:

\n\n@Element() host: HTMLElement;\n\n

Declare the slots that you want to check for using private variables:

\n\n\nprivate panelLeftSlot: HTMLElement;\nprivate panelRightSlot: HTMLElement;\n\n\n\n

\n Now, in the componentLoad() lifecycle method, you can attempt to populate the representative slot variables. \n If the user does not inject the named slots when they use your component, the respective variables will simply remain undefined, which you \n can test for.\n

\n\n

componentWillLoad() {\n    this.panelLeftSlot =  this.host.querySelector("[slot='panel-left']")\n    this.panelRightSlot =  this.host.querySelector("[slot='panel-right']")\n}

\n\n

\n To illustrate this in full, let's look at the code for a component that uses the Bootstrap grid system to render a layout. \n The DOM structure and CSS classes are to be rendered differently, depending on the given slots.\n

\n\n

import { Component, Element, Host, h} from '@stencil/core';\n\n@Component({\n    tag: 'glass-layout',\n    shadow: false,\n})\nexport class GlassLayout {\n\n    @Element() host: HTMLElement;\n\n    private panelLeftSlot: HTMLElement;\n    private panelRightSlot: HTMLElement;\n\n    private panelLeftCSS: string;\n    private panelCenterCSS: string;\n    private panelRightCSS: string;\n\n    componentWillLoad() {\n\n        this.panelLeftSlot =  this.host.querySelector("[slot='panel-left']")\n        this.panelRightSlot =  this.host.querySelector("[slot='panel-right']")\n\n        if(this.panelLeftSlot && this.panelRightSlot) {\n            this.panelLeftCSS = 'col-md-3'\n            this.panelCenterCSS = 'col-md-6'\n            this.panelRightCSS = 'col-md-3'\n        } else {\n            this.panelLeftCSS = 'col-md-4'\n            this.panelCenterCSS = 'col-md-8'\n            this.panelRightCSS = 'col-md-4'\n        }\n\n    }\n\n    render() {\n\n        return (\n            <Host>\n                <slot name="header" />\n                <main class="flex-shrink-0">\n                    <div class="container">\n                        {this.panelLeftSlot || this.panelRightSlot\n                        ? \n                            <div class="row">\n                                {this.panelLeftSlot ? <div class={this.panelLeftCSS}><slot name="panel-left" /></div> : []}\n                                <div class={this.panelCenterCSS}><slot/></div>\n                                {this.panelRightSlot ? <div class={this.panelRightCSS}><slot name="panel-right" /></div> : []}\n                            </div>\n                        :\n                            <slot/>\n                        }\n                    </div>\n                </main>\n                <slot name="footer" />\n            </Host>\n        )\n\n    }\n}\n

\n\n

Now, here's an example that uses all of the named slots available...

\n\n

<glass-layout>\n    <div slot="header" style="background-color: red">HEADER</div>\n    <!--\n        START: MAIN CONTENT\n        Main panel is not actually a named slot. Any elements without a named slot will just go in the \n        default, unnamed slot...\n    -->\n    <h1 class="mt-5 display-4">HELLO WORLD!</h1>\n    <p>Paragraph One</p>\n    <p>Paragraph Two</p>\n    <!--\n        END: MAIN CONTENT\n    -->\n    <div slot="panel-left" style="background-color: purple; height:100%">PANEL LEFT</div>\n    <div slot="panel-right" style="background-color: blue; height:100%">PANEL RIGHT</div>\n    <div slot="f

Blog