How to use a Smart Element in a self-made custom element

Tagged: angular components, custom components, custom elements, smart elements, smart framework, web components

This topic has 1 reply, 2 voices, and was last updated 4 years, 10 months ago by Hristofor.

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.