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`);…
I am creating a dropdown menu but there is a bug when using the vertical version for mobile phones and small devices. THE PROBLEM: When hovering, the first time hovering over one of the "main-categories" it will follow the css…
How can I create a custom HTML element that can be styled with CSS and have specific behaviors, such as click events, proper semantics, and accessibility? Are there any best practices for defining specific behaviors for custom HTML elements using…
I have this custom HTML element causing me trouble. Down in the StaffList connectedCallback() function, i have to call and outside function of the parrent but the super keyword for addStaff() is giving me an error. "Uncaught SyntaxError: use of…
I'm trying to change what is returned when you access the value property on this custom element - which extends HTMLInputElement. This would be used for entering currency values. The input would show 1,000.00 (string) but would return 1000 (float)…