Questions tagged [lit-element]

A base class for creating custom elements with the Lit JS library.

LitElement makes it easy to define web components using lit/Lit. LitElement allows you to declare reactive properties that re-render the component and reflect to attributes.

It uses lit-html to render DOM.

677 questions

votes

1 answer

lit-element - How to call an event from a slot button?

element import { LitElement, html } from 'lit-element'; class Component extends LitElement { render () { return html` …

lit-element lit-html

asked Feb 26 '20 at 14:56

jofftiquez

7,548
10
67
121

votes

1 answer

Refactor four methods in just two in lit-element

Is it possible to refactor these four methods in just two in lit-element? I have the same counter but duplicate, one for case 0 and one for case 1. As the variables are different, I have done the same method twice to take every variable baceuse I…

javascript web-component lit-element

asked Feb 25 '20 at 13:40

user6767724

votes

2 answers

litelement - handling click away event

I'm building a site navigation using litelement. It will have a dropdown menu. I am trying to figure out how to add an event so that if a user clicks anywhere outside the dropdown menu itself or even outside of the custom element, the dropdown menu…

javascript lit-element

asked Feb 24 '20 at 16:12

aver

votes

1 answer

lit-element bind to properties of an object that may be null or its subproperties may be null

I have this scenario all the time: a list of entities (say Customer) and a form to edit the selected entity. I bind the form fields to properties of the currently selected entity like this:

lit-element lit-html

asked Feb 23 '20 at 10:46

NicolasR

2,222
3
23
38

votes

1 answer

LitElement shadow root after styles loaded event

I have a problem, I need to handle event after CSS styles was loaded into my component. I was trying to use lit-element lifecycle, still they are fired to early. I'm trying to get my DOM element starting position and other data, but I get an initial…

javascript web-component shadow-dom lit-element lit-html

asked Feb 21 '20 at 09:04

Szymon Stach

votes

1 answer

How to pass data between lit-element templates?

I am trying to pass data from one component to another. My idea is to have a generic component with buttons that increase or decrease a value and add those specific values to another template. Here is my code with the buttons: import {…

javascript web-component lit-element lit-html

asked Feb 19 '20 at 13:54

user6767724

votes

1 answer

Why the property 'classList' cannot be read?

I am trying to add and remove a class depending on whether a variable is equal to 0. Here is my code: import { LitElement, html } from 'lit-element'; class SelectCounter extends LitElement { static get properties() { return { …

javascript web-component lit-element

asked Feb 17 '20 at 16:28

user6767724

votes

2 answers

Is it possible to condition a default value in the constructor depending on another value?

I want to set a defalt value in the constructor depends on other value. Here is the template where the type values are: class SelectOption extends LitElement { static get properties() { return { type: {type: Array} …

javascript if-statement lit-element

asked Feb 17 '20 at 12:28

user6767724

votes

1 answer

how to make a method that push items to empty array with lit-element

I have an empty array with lit-element to add the ages between 2 to 13 years that I generate with a loop. I need to add each element within the array using a method but I don't know how to make it work. This is what I have: import { LitElement, html…

javascript arrays web-component lit-element

asked Feb 17 '20 at 08:14

user6767724

votes

2 answers

Angular banana-in-a-box with webcomponents (LitElement)

I'm using LitElement webcomponents with an angular application I implemented two ways data binding with a CustomEvent dispatch but I would like to use angular's banana-in-a-box syntax sugar. Example : this stackblitz : a webcomponent with an integer…

angular data-binding web-component lit-element two-way-binding

asked Feb 13 '20 at 10:12

Alfred

votes

1 answer

.NET Core mvc UseSpa UseProxyToSpaDevelopmentServer serves build version instead of development version

I'm using LitElements to build my frontend. I want to configure .net core mvc spa with it. here how my config looks like: Startup.cs app.UseSpa(spa => { spa.Options.SourcePath = "wwwsrc"; if (env.IsDevelopment()) { …

c# asp.net-mvc asp.net-core .net-core lit-element

asked Feb 05 '20 at 10:48

motemood

votes

1 answer

color as an attribute in litelement custom element

I'm building a custom web component with LitElement and would like to give it a color attribute. I've got the color working but its hardcoded. I want the color to change based on user preference. for example,

javascript custom-element polymer-3.x lit-element

asked Feb 03 '20 at 23:53

Bolu Oluwalade

votes

1 answer

Not able to pass JSON stringify data to Lit Element child component in IE Edge browser

I am trying to pass my JSON data(JSON stringify data) to child component in Litelement Compoent. It is working in Chrome. But getting undefined in IE Edge browser

json microsoft-edge web-component lit-element

asked Dec 24 '19 at 07:21

Tech Geek

votes

1 answer

Retrieve properties data from LitElement Web Component

I am trying to create a web component with the following features: 1. click a button to add a

element.
2. After adding text to newly created <textarea> element, this text is added to the corresponding item of this.list.
3. In a separate…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/web-component" class="post-tag grid--cell" title="show questions tagged 'web-component'" rel="tag">web-component</a> 
                
                <a href="../../questions/tagged/lit-element" class="post-tag grid--cell" title="show questions tagged 'lit-element'" rel="tag">lit-element</a> 
                
                <a href="../../questions/tagged/native-web-component" class="post-tag grid--cell" title="show questions tagged 'native-web-component'" rel="tag">native-web-component</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Dec 21 '19 at 18:43">asked Dec 21 '19 at 18:43</time>
    <a href="../../users/7092900/max888" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/7092900.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Max888" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/7092900/max888" class="s-user-card--link">Max888</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">3,089</li>
            
            <li class="s-award-bling s-award-bling__silver" title="24 silver badges">24</li>
            <li class="s-award-bling s-award-bling__bronze" title="55 bronze badges">55</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-59309361">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/59309361/how-to-access-elements-in-a-child-component-slot" class="question-hyperlink">How to access elements in a child component <slot>?</a></h3>
        <div class="excerpt">I have a component which uses named slots from <another-component>. I was trying to get the <span> by calling this.shadowRoot.getElementById('title') in <another-component>, it always returns null:
  render() {
    return html`
     …</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/web-component" class="post-tag grid--cell" title="show questions tagged 'web-component'" rel="tag">web-component</a> 
                
                <a href="../../questions/tagged/lit-element" class="post-tag grid--cell" title="show questions tagged 'lit-element'" rel="tag">lit-element</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Dec 12 '19 at 16:53">asked Dec 12 '19 at 16:53</time>
    <a href="../../users/11931090/hammerhead" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/11931090.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Hammerhead" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/11931090/hammerhead" class="s-user-card--link">Hammerhead</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,044</li>
            
            <li class="s-award-bling s-award-bling__silver" title="8 silver badges">8</li>
            <li class="s-award-bling s-award-bling__bronze" title="19 bronze badges">19</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>