I want to instantiate a web component based on a <template> element in the DOM using JS to set 2 slot values title and text. template HTML <template id="tiddler-display"> <div class="tiddler"> <h1><slot name="title">TITLE</slot></h1> <p><slot name="text">TEXT</slot></p> </div> </template> How does one…
Since I don't know a way to style a web component with parent lightDOM class selector to choose which is the theme selector (light or dark) i've found a way to choose it via custom property: The HTML page <html…
This issue references to the fact that React intentionally remounts your components in development to find bugs. I know I can turn off strict mode, but React doesn't recommend it. I'm just looking for a recommended approach to fix this.…
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 am curretly adding some customm elements for an inhouse framework , however I noticed that we are getting all the elements on an index file to use them inside the html. Do you know a better way to do…
Update: I added more details of how I'm using the constants in response to questions. The actual problem I'm observing is that the constants are added to the global object, and so I'm worried about potential name collisions. I defined…
I'm trying to develop a syntax highlighting web component and it will take content placed inside it and syntax highlight it. So something like this: <fs-highlight data-line-numbers="true" data-language="html"> any content here .... </fs-highlight> This is a prototype implementation and it…
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…