Seo – Can a Lit element go in the <head> tag?
I'd like to make an SEO lit component where I can pass data to fill in meta tags, etc so I don't need to repeat them on every index page. If I place my component like so... <head> <script type="module"…
Javascript – Capture custom event dispatched from web component in React
I need to embed a Lit web component in a React application. The web component at some point will be dispatching a custom event, and I need to capture it in the React application and react accordingly. However, for some…
Javascript – Pass data via CustomEvent from JS to Java
I have a Vaadin project I'm dispatching a CustomEvent from a JS lit component. I'm listening to it from a Java class and I correctly receive the events emitted. The following is my JS code: this.dispatchEvent(new CustomEvent('change', {detail: this.breakLines, bubbles:…
Javascript – Lit not rendering slotted children
I'd like to create a custom element to render a select input. One parent creates <select> then a slot generates the <option> based on an array of choices. import {html, css, LitElement} from 'lit'; export class SimpleSelect extends LitElement {…
Html – How to add stylesheet to shadow dom?
I am using web components. I have the following html structure <div class="test"> #shadow-root (open) <overlay-trigger type="modal"> <div id = "login-dialog"> #shadow-root (open) <div id = "modal"> I have the following code const styleString = String(styles); const style = document.createElement("style");…
Javascript – Moving the contents of the page up when mobile keyboard is shown
How do I move the contents of the page up when the mobile keyboard is shown? Right now on Safari in IOS native, when the mobile keyboard is shown, the keyboard covers the input box. I need to make sure…
Missing decorators specifier in lit package – Reactjs
I have installed lit package via npm, then i replaced my-element.ts file with my own .ts file and also updated the package.json file with the new .ts file Error details `import { LitElement,html,css } from "lit"; import { customElement, property…