Rendering

The primary way to define a component's visual interface is by implementing the render() method. This method is called once during the component's initialization. The returned content is rendered into the component's contentRoot (which is either the shadow root or the element itself if shadow DOM is disabled).

The render() Method

The render() method has the following signature:

1render(): HtmlTemplate | string | Node | void

Supported Return Types

HtmlTemplate: The recommended return type. Built using the html tagged template from @beforesemicolon/web-component. It compiles into highly efficient DOM updates that only refresh the specific dynamic values in your template.

1 import { WebComponent, html } from '@beforesemicolon/web-component'2 3 class SimpleCard extends WebComponent {4     render() {5         return html`6             <div class="card">7                 <h2>Card Title</h2>8                 <p>Card content goes here.</p>9             </div>10         `11     }12 }

string: A raw HTML string can be returned. Note that returning raw strings does not benefit from the surgical reactive updates provided by HtmlTemplate.
javascript
```
1 class StringElement extends WebComponent {2     render() {3         return '<div>Raw HTML string content</div>'4     }5 }
```

Native Node: You can return standard DOM nodes created programmatically.

1 class DOMNodeElement extends WebComponent {2     render() {3         const div = document.createElement('div')4         div.textContent = 'Native DOM Node Content'5         return div6     }7 }

null or void: Headless or logic-only components that do not render any markup can return null or omit the return value.

1 class HeadlessTracker extends WebComponent {2     onMount() {3         console.log('Tracker active')4         // Perform background tasks...5     }6 7     render() {8         // Nothing is rendered9     }10 }

Slot Projections

Web Components support content projection via the <slot> element, allowing users to pass markup down into your component. By default, @beforesemicolon/web-component supports both default slots and named slots.

Default Slots

An unnamed <slot> acts as the default catch-all container for any children passed inside your custom element.

Component Definition:

1import { WebComponent, html } from '@beforesemicolon/web-component'2 3class SimpleBox extends WebComponent {4    render() {5        return html`6            <div class="box">7                <slot></slot>8            </div>9        `10    }11}12customElements.define('simple-box', SimpleBox)

Usage in HTML:

1<simple-box>2    <p>This paragraph will render inside the box slot.</p>3</simple-box>

Named Slots

To project content into specific locations, use named slots. You specify the name using the name attribute on the <slot>, and match it using the slot attribute on the element to project.

Component Definition:

1class LayoutPanel extends WebComponent {2    render() {3        return html`4            <div class="panel">5                <header>6                    <slot name="header"></slot>7                </header>8                <main>9                    <slot></slot>10                    <!-- default slot -->11                </main>12                <footer>13                    <slot name="footer"></slot>14                </footer>15            </div>16        `17    }18}19customElements.define('layout-panel', LayoutPanel)

Usage in HTML:

1<layout-panel>2    <h1 slot="header">Panel Header</h1>3    <p>Main content goes to the default slot.</p>4    <p slot="footer">Panel Footer Information</p>5</layout-panel>

edit this doc