HTML Elements Forums Forms & Editors Buttons basic usage

This topic contains 8 replies, has 2 voices, and was last updated by Avatar B. Markov 5 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #100705
    Avatar
    chisholmd
    Participant

    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>

    #100706
    Avatar
    chisholmd
    Participant

    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

    #100707
    Avatar
    chisholmd
    Participant

    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.

     

    #100708
    Avatar
    chisholmd
    Participant

    …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.

    #100709
    Avatar
    B. Markov
    Participant

    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

    #100710
    Avatar
    chisholmd
    Participant

    Aha! Yes thank you that sounds very likely.

     

     

     

     

    #100711
    Avatar
    chisholmd
    Participant

    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.

    #100712
    Avatar
    chisholmd
    Participant

    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?

    #100713
    Avatar
    B. Markov
    Participant

    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

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

You must be logged in to reply to this topic.