lit-element

问题 I am using LitElement to create custom Web Components. I am fairly new at it and decided to try making image slideshow. I used W3Schools slideshow as reference while modifying it to work as LitElement. The problem is, that when I am trying to use document.getElementByClassName I am not getting anything. I am familiar with this issue since I am working with Shadow DOM so I changed it to this.shadowRoot.getElementsByClassName. Unfortunately, I get told that what I am trying to use is not a

问题 Given the following sample code: import { LitElement, html, css } from 'lit-element'; class ItemsDisplay extends LitElement { static get styles() {...} static get properties {...} constructor () { super(); ... } render { return html` ${this.items.map((item, index, array) => html` <div class="name"> ... </div> `)} `; } } What is the appropriate way to select all nodes with class "name"? I have tried the following ways, but failed ; all times nodesList was undefined : Inside constructor : this

问题 I would like to implement lit-element-bootstrap package in lit-element. I am getting following error in console, Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec //header.js import { LitElement, html, css } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module'; import 'https://unpkg.com/lit-element-bootstrap@1.0.0-alpha.10/lit-element-bootstrap'; export class

问题 I would like to know how to set checked to radio button using litelement. I have a object and for each object options, radio button is created. For example, for id=SG two radio buttons are created, if no checked, set bank as default checked else set corresponding selected radio value as checked. I got stuck in litelement. const obj= [{ id: "SG", options: ["bank", "credit"] }, { id: "TH", options: ["bank"] } ]; render(){ ${obj.map((e)=>{ return html` <form> ${obj.options.map((option_value)=>{

问题 I'm trying to use MDC Components for material design components on my application. I have a custom element in Polymer (LitElement): _render(props) { return html` ${SharedStyles} <style> .js-panel { display: none; } .js-panel.is-active { display: block; } </style> <div class="mdc-toolbar"> <div class="mdc-toolbar__row"> <div class="mdc-toolbar__section mdc-toolbar__section--align-start"> <nav id="tab1" class="mdc-tab-bar mdc-tab-bar--indicator-accent js-tabs" role="tablist"> <a role="tab" aria

问题 I'm working on a lit-element project, and I got a problem that reset.css cannot be applied to web components wrapped with shadow-root I've tried this way, and I got this following error. Refused to apply style from 'http://localhost:8080/style/static/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. The code I tried is this: <script> var css = new CSSStyleSheet() css.replace('@import url("./style/static/reset.css")')

问题 I'm trying out lit-element and everything was going well with browsers such as Chrome and Firefox. But I faced a problem when I tried Microsoft Edge and IE11. The web component that shows in Chrome and Firefox doesn't show in Microsoft Edge and IE11. I did some search on the internet and also read the documentation of Lit Element and it says I will need to load the polyfills in order for the web components to work in Edge and IE11, however I have encountered problems while trying to do so.

问题 I want to react on events started by elements placed in the data-grid rows. Vaading data-grid prevents events from bubbling up to the parent component containing the grid. Having buttons placed in the grid column rendered for each row I cannot catch the click or any other event from the component that hosts the grid. The examples from https://vaadin.com/components/vaadin-grid/html-examples are relying on js hooks being attached in the html file. I am working with Lit-element and trying to do