With Chrome based browsers I would IMPORT a style sheet via: - My component - import sheet from '/Vanilla/ScrollGrid.css' assert {type: 'css'}; or calling user web page - if (userStyles != undefined && userStyles != null) { if (typeof userStyles…
I'm trying to dynamically add a custom element I created, but it's not generating them properly. div-item declaration: class Item extends HTMLElement { constructor() { super(); this.src = this.getAttribute("src"); this.link = this.getAttribute("href"); this.attachShadow({ mode: 'open'}); this.text = this.textContent.trim(); this.shadowRoot.innerHTML =…
I am trying to use Bootstrap 5 in a Vue 3 Options Api custom element. I have been having issues with loading bootstrap correctly. This is my main.ts file: import { defineCustomElement } from 'vue' import 'bootstrap/dist/js/bootstrap.bundle' import App from…
I have custom element which has an input element that is not a first grade child. I want to get the parent custom element from the input and I tried using input.closest() but it does not work with custom elements…
The snippet below spits out an error that CustomElementParent is not defined when I try to extend from it in CustomElementChild. When I remove the ! customElements.get('custom-element-parent') check, it works. In my case, CustomElementParent is in a third party script,…
EDIT 1+ Ok, sorry for the wild goose chase. this appears to be a straight forward CSS issue. In the light DOM: - #disTick::part(endo) { box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); */ background: linear-gradient(to top, #165273…
Say I have this thing called a "panel". It contains a hidden section and a button to show it. Easy enough. However I got a little fancy and decided to use a custom element <custom-panel> to markup the boundaries for…
I am creating a simple site bundled with Vite, but with no external frameworks like React, Vue, Svelte, etc. The site has repetitive HTML elements using different data. I would like to use custom elements for these. I'm using custom…
I am making a custom element that functions as a textarea with syntax highlighting and some other features. I've simplified it to a custom element with a div inside that gains height when clicking the page. To make the custom…
I created a custom HTML element: class PieChart extends HTMLElement { constructor() { super(); } init() { this.#render(); } #render() { const circleElement = document.createElement("circle"); circleElement.setAttribute("cx", 100); circleElement.setAttribute("cy", 100); circleElement.setAttribute("r", 80); circleElement.setAttribute("fill", "none"); circleElement.setAttribute("stroke", "green"); circleElement.setAttribute("stroke-width", 40); circleElement.setAttribute("stroke-dasharray", `502.85 502.85`);…