JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › How to use a Smart Element in a self-made custom element

Tagged: , , , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • January 3, 2020 at 2:40 pm #100546
    admin
    Keymaster

    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>
     

    January 6, 2020 at 9:01 am #100547
    Hristofor
    Member

    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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.