basic usage

[admin]

I am using web components with Lit-Element.   In my index.html I have included the css
<div>

<div>  <link rel=”stylesheet” href=”../node_modules/smart-webcomponents-community/source/styles/smart.default.css” type=”text/css” /></div>

</div>
<div></div>
<div>In one of my components I have imported the module for smart-button</div>
<div>
<div>

<div>   import {smartButton} from ‘smart-webcomponents-community/source/modules/smart.button.js’;</div>

<div>
<div>
<div>I have included the button in my template
<smart-button @click=”${this.handleClick.bind(this)}”>Click me</smart-button></div>
</div>
<div>This is a screen shot of what appears</div>
<div></div>
</div>
</div>
</div>
<div>It doesn’t look to me like the component is firing.   The onClick works, but the lack of styling makes me think that the component is not loading.   I use parcel, and when I run it does not complain about any missing dependencies.</div>
<div></div>
<div>Any ideas?</div>
<div></div>
<div></div>

[admin]

I got a reference to the button and inspected it in the console and it is indeed instantiated.   So it looks like I just need to dive into the style and theme settings as it is not applying any style whatsoever.   I expected the default look to match what is in the docs, but I guess not?  Anyway, if you see anything I am missing please let me know.
We are very much looking to buy because we want the tree,  but I need to confirm the basic usage first.
 
Thanks

[admin]

I just noticed that in the documentation for smart.button is says:

“To initialize a button element the user has to include the following files to the head of the page:
…
smart.element.js – the base class
…
“

What does it mean that I need to include the base class?  If I have <my-element> and inside that I want to use <smart-button>…  Does <my-element> need to extend smart.elements.js?    That can’t be right…  Do I just need to reference it from my index.html?  I will try that.
 

[admin]

…hmm the docs seem to be off a little.  In the doc for smart-button it says
“Note how <b>smart.element.js</b> and <b>webcomponents.min.js</b> are declared before everything else. This is mandatory for all custom elements.”
But the screen shot does not include them at all.

[admin]

Hi,
These files are included in the button module.
smart.button.js in modules is a bundle of the necessary files, one of which is smart.element.js. You may look at the online samples, too.
As far as I see you’re using it with Lit Element which creates a Shadow DOM, then you should add the smart.default.css within that Shadow DOM. Otherwise, as the shadow dom is isolated, that will not allow the outside CSS to style elements in the shadow dom.
Regards,
Boyko

[admin]

Aha! Yes thank you that sounds very likely.
 
 
 
 

[admin]

Well it looks like I have a long day ahead of me.  I am following the instructions from lit-element on sharing styles but so far no joy.
https://lit-element.polymer-project.org/guide/styles#sharing-styles
Thanks for getting me facing in the right direction.

[admin]

IO am not having any luck getting the smart-button in shadowDom picking up shared styles using the method described here:
https://lit-element.polymer-project.org/guide/styles#sharing-styles
What is the ‘smart’ preferred method? or are they not intended to be used in shadowDom?

[admin]

We support Shadow DOM. Smart is one of the first Web Components libraries and can be used for building Web Components.
To use Smart with LitElement, you can use this approach:
import { LitElement, html, css } from ‘lit-element’;
Smart.EnableShadowDOM = true;
export class SuperElement extends LitElement {
static get styles() {
return css`
`;
}
render() {
return html`
<link rel="stylesheet" type="text/css" href="https://htmlelements.com/demos/source/styles/smart.default.css"&gt;
<smart-button>Click me</smart-button>
`;
}
}
customElements.define(‘super-element’, SuperElement);
Regards,
Boyko

[Author]

Posts