HTML Elements Forums General Discussions How to use a Smart Element in a self-made custom element

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Hristofor 1 year, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #100546


    I plan to create a custom element in which I like to use a <smart-list-item>. However I only get it to work outside my custom element. I want to achiev it in such a way that the smart list item is used transparently when someone uses my custom element. Is this possible?

    Here is a simple showcase:

    <!– Step 1: Create template for the component –>
    <template id=”vanilla-webcomponent-template”>
    This is not working!
    <smart-list-box grouped filterable sorted selectionMode=”zeroOrOne”>
    <smart-list-item>Washington, Connecticut</smart-list-item>
    <smart-list-item>Washington, Iowa</smart-list-item>

    <!– Step 2: Create custom element class and register it –>
    class VanillaWebcomponent extends HTMLElement {
    constructor() {

    this.attachShadow({ mode: ‘open’ }); // Creates a shadow DOM root node for the element

    const template = document.getElementById(‘vanilla-webcomponent-template’);
    const templateInstance = template.content.cloneNode(true); // Clones the contents of the template
    this.shadowRoot.appendChild(templateInstance); // Inserts the template contents into the shadow DOM

    connectedCallback() {

    customElements.define(‘vanilla-webcomponent’, VanillaWebcomponent);

    <link rel=”stylesheet” href=”source/styles/smart.default.css” type=”text/css” />
    <script type=”text/javascript” src=”source/smart.element.js”></script>
    <script type=”text/javascript” src=”source/smart.button.js”></script>
    <script type=”text/javascript” src=”source/smart.scrollbar.js”></script>
    <script type=”text/javascript” src=”source/smart.listbox.js”></script>
    <!– Step 3: Render custom component and compare it to non-custom markup –>
    This works!
    <smart-list-box grouped filterable sorted selectionMode=”zeroOrOne”>
    <smart-list-item>Washington, Connecticut</smart-list-item>
    <smart-list-item>Washington, Iowa</smart-list-item>



    Hi feffe,

    yes, you can use the ListItem element even if it’s outside the ListBox component. May I suggest you create custom components using the Smart Library instead of the WebComponents. It’s simpler and easier to create custom elements using the Smart Framework. Smart elements also support ShadowDOM by simply settings the Smart.EnableShadowDOM flag to true. We have a complete tutorial on how to create custom elements using the Smart Framework. Here’s the link to the documentations. Here’s how the definition of the same element looks like using Smart:

    	Smart('vanilla-webcomponent', class VanillaWebcomponent extends Smart.ContentElement {  
    	 /** Element's template. */  
    	 template() {  
    	   return '<div class="custom-element-container"><smart-list-box grouped filterable sorted selectionMode=”zeroOrOne”>' +
                           '<smart-list-item>Washington, Connecticut</smart-list-item>' +
                           '<smart-list-item>Washington, Iowa</smart-list-item>' +

    Best Regards,

    Smart HTML Elements Team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.