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
    Posts
  • #100546
    Avatar
    feffe
    Participant

    Hello,

    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:

    <html>
    <head>
    <!– 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>
    </smart-list-box>
    </template>

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

    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);
    </script>

    <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>
    <head>
    <body>
    <!– 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>
    </smart-list-box>
    <hr>
    <vanilla-webcomponent></vanilla-webcomponent>
    </body>
    <html>

     

    #100547
    Avatar
    Hristofor
    Participant

    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>' +
                       '</smart-list-box></div>';  
    	 }  
    	 });  
    

    Best Regards,
    Christopher

    Smart HTML Elements Team
    https://www.htmlelements.com

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

You must be logged in to reply to this topic.