Consider a webpage that contains a button which triggers the opening of a modal: <dialog></dialog> <button>Open modal</button> const trigger = document.querySelector(`button`); const wrapper = document.querySelector(`dialog`); trigger.addEventListener(`click`, () => { wrapper.replaceChildren(new Modal()); wrapper.showModal(); }); The modal is a custom element: class…
I have a full Angular 16 application, containing routing, multiple components and services and I need to convert it into a single Webcomponent, that can be loaded via the script tag in an external UI application/shell. So far, all the…
My <web-component></webcomponent> is very simply built, a series of <input type="text part="input" /> directly in the #shadow-root. I can style them all at one without any troubles with: web-component::part(input) { border: 1px solid #000 } But neither of these works…
so I'm creating custom web components using Vue 3 to be used in any web application and I'm running into a problem when it comes to importing fonts and Google material icons because of the shadow-root. My current approach is…
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 have a custom element (MdTextField that renders Material Web's <md-filled-text-field>) that acts similar to <input />. Now the problem is, when using @bind-Value, what Blazor does is setting its value HTML attribute and not element (DOM) property. This does…
TLDR; I want to initialize all components at once using the @ionic/core npm package instead of initialize() and for each component defineCustomElement() I started digging into ionic without frameworks (plain web components) and npm i the @ionic/core package. It's documentation…
I want to create an element on the fly with attributes, NOT add them after the object is already created (setAttribute does not work). Point: I have setup a web component to interact with it's attributes inside it's constructor (this.getAttribute).…
I'm new in JavaScript web components and for this case I was trying to call a method by clicking on button but it doesn't work... Run this code: <test-element></test-element> <script type="text/javascript"> class TestElement extends HTMLElement { constructor() { super(); }…
I am trying to add a custom scrollbar to a web component. I am not very familiar with web components but i understand that it is difficult to apply pseudo-elements to parts. From my reading, one way to apply styling…