Questions tagged [native-web-component]

Native Web components are reusable client-side elements made using native HTML Templates, Custom Elements, and Shadow DOM, without the need for third-party component libraries.

Filter by
Sorted by
Tagged with
1 vote
1 answer
37 views

CSS: Can you use `:has` within `:host()` selector?

In the below example, I am trying to style the **host** depending on whether it has a slotted element that has the empty attribute. If it does have such an element, then I wish to add a lime green ...
run_the_race's user avatar
  • 1,647
1 vote
1 answer
75 views

How can I catch children added to a web component before first render?

I'm attempting to create a web component that modifies the behavior and style of its child elements. However, I'd like to do this modification before the first render, so that no flickering occurs. ...
Paul R Jones's user avatar
0 votes
1 answer
35 views

Customized built-in elements do not work in chrome extension?

The problem This autonomous custom element works both in the content.js(extension JavaScript context) and top JavaScript context: window.customElements.get('custom-element') || customElements.define('...
Lerner Zhang's user avatar
  • 6,384
0 votes
0 answers
21 views

Hiding Web Custom component's Attribute value

I'm new to Native Javascript Web Component. I've created a Web Component class Table extends HTMLElement { constructor() { super(); this.root = this.attachShadow({ mode: "closed" })...
Jim Jim's user avatar
0 votes
0 answers
31 views

web components formResetCallback() never triggers

I have a custom web components written using lit components and I am currently trying to make the it behave like a regular form input. After a bit of tinkering I have the whole attachInternals() thing ...
Mercury's user avatar
  • 632
0 votes
0 answers
48 views

Hide Light DOM (Nested Elements) on Web Components While Waiting for Slot Absorption to Prevent Flashing Temporary Rendering of Content

I want to prevent showing light DOM content while it's waiting to be absorbed into a <slot>. I've tried many workarounds. Here's my use case: <custom-select> <custom-option>One<...
Modular's user avatar
  • 6,660
0 votes
0 answers
42 views

CSS: Styling a pseudo element of a part of a web component

I have a custom web component, a dialog (very simplified version below), which has a part, the part has the pseudo element. Bascially within the custom webcomponent is a <dialog part="dialog&...
run_the_race's user avatar
  • 1,647
0 votes
2 answers
93 views

Why would this web component not show?

I have some JS that creates a web component and then proceeds to add it to a very basic HTML page class WordCount extends HTMLParagraphElement { constructor() { // Always call super first ...
Josh Klein's user avatar
0 votes
0 answers
23 views

embed an html file with styles, javascript using ShadowDOM webcomponents

I have a html file with css, html, javascript. Usecase: Do not use iframes but needed to import above html file along with css, js completely onto another application. I am looking at alternatives ...
Sri's user avatar
  • 1,217
0 votes
0 answers
27 views

native Web components and customized scrollbar styling issue

Hi i wanted to create a webcomponent with a custom scrollbar but i do not succeed in styling that webcomponent inside a shadow dom object. I created a mixin scrollbar with these pseudo classes and ...
Katje's user avatar
  • 1
0 votes
2 answers
141 views

Unable to select <slot> using CSS Selector, how to style it to make "Launch" text color red?

As per above screenshot, I am trying to style web component , and content inside slot reveal/pointing to "Launch" when clicked. How can I style slot to apply text colour to "Launch"...
user8195088's user avatar
1 vote
0 answers
128 views

Connected callback firing for component that does not have a parent element

I have a web component, thats quite large and complicated, but here is the part that is giving me an issue. About once in every 20 times I reload the page I get this error (within connected call back, ...
run_the_race's user avatar
  • 1,647
0 votes
1 answer
70 views

How can I restrict styling a closed Shadow DOM to particular outer hosts?

I'd like to style an inner custom element's closed Shadow DOM from an outer custom element. – Outside the outer custom element, the inner Shadow DOM should not be stylable. So, in general, a ...
AxD's user avatar
  • 2,840
0 votes
1 answer
136 views

HTML `part` and `class` attributes – what's the difference?

HTML has recently been added a part attribute plus corresponding CSS selector. What's the difference between part and class? What can I do with the part attribute that I can't archive using the class ...
AxD's user avatar
  • 2,840
0 votes
1 answer
82 views

TypeScript inheritance of web components breaks while importing modules from mapped source files from dist

I am trying to figure out how to bundle my JS generated code from TS files and I am facing some issues. I have two components, where one is extending the another. Let's keep it simple. tsconfig.json { ...
WinterMute's user avatar
0 votes
0 answers
67 views

Stencil js with Angular 1.5

I have an Angular 1.5 application with gulp 3.9.0. This app also a consumer of web component library which is written using stencil js 2 and loaded via CDN. Sometimes after another build i got JS ...
Denys's user avatar
  • 303
0 votes
1 answer
257 views

WYSIWYG editor web component

I try to create a WYSIWYG web component and I have problem defining a reusable function inside the web component class. The contents of my index.html file is the following: <!DOCTYPE html> <...
pitaridis's user avatar
  • 2,843
0 votes
0 answers
109 views

How can I access the real HTML element in Typescript property decorator

I want to create a simple HTML element property decorator like Lit for my own component library without Lit function property({}: { dataPrefixed?: boolean } = { dataPrefixed: false }) { return (...
huge-pancake's user avatar
0 votes
1 answer
287 views

Web components + A11y

I have a few questions about web components and Accessibility, I read some articles but I never see any examples or case histories that I can test by myself. I did some tests but I'm not sure they ...
Andrea Campaci's user avatar
0 votes
1 answer
208 views

Global resets a pain with web components

I have a global reset like this: * { margin: 0; padding: 0; } Now if I define padding on a web component, I have to add !important to override the global reset, for example (in the shadow root ...
run_the_race's user avatar
  • 1,647
1 vote
1 answer
52 views

Suspected Chrome bug: CSS `last-of-type` not updating in webcomponent if apply certain styling

The following code works fine with Firefox, but is buggy with Chrome. I have a tst-list web component. In it is a tst-add component, which looks like a plus icon, with id ADD. When one clicks the add ...
run_the_race's user avatar
  • 1,647
0 votes
1 answer
808 views

How to access the data inside a SLOT in web-components (aka: custom components) with javascript

Im trying to understand how I can use <slot> properly. I made this example which I would like to be able to access the qty from the tag <li name="qty">102</li>, which has ...
Peter Moore's user avatar
  • 1,757
0 votes
1 answer
112 views

How to delete and element that is rendered in a Web Component

In the code snippet if you click the select button it renders a div with a button I'm trying to remove the div when button clicked. This is how the code flows. In SelectedBtn component handleSelect is ...
Mike Haslam's user avatar
0 votes
2 answers
48 views

Suspected Chrome bug: CSS `last-of-type` not updating on webcomponent

NOTE THe below question is flawed, please rather refer to: Suspected Chrome bug: CSS `last-of-type` not updating in webcomponent if apply certain styling Below you will see a list of gray blocks, ...
run_the_race's user avatar
  • 1,647
0 votes
1 answer
72 views

How to bind a delete method to a rendered web component

I am having trouble figuring out how to bind my handleDelete method. The way I have it structured is the user clicks the plus button then data objects get stored in an array on the window object. Then ...
Mike Haslam's user avatar
0 votes
2 answers
256 views

In a Web Component How to show tooltip & hide tooltip when clicking outside or when another tooltip clicked

I have this Web Component that has cards with tooltips. I am trying to accomplish 3 things. I am trying use Vanilla Javascript vs jQuery or other libraries. Show when a button is clicked then hide ...
Mike Haslam's user avatar
1 vote
2 answers
318 views

Align separate native HTML web component into a table or grid

I have a like a spreadsheet of data (rows and columns), and I am converting to web components. It makes sense to make each column a web component. However some of the fields may require more vertical ...
run_the_race's user avatar
  • 1,647
0 votes
1 answer
160 views

Manual slotAssignment doesn't assign contents

class RealTodo extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open", slotAssignment: "manual" }); } connectedCallback() { const ...
Anil kumar's user avatar
  • 1,322
0 votes
1 answer
261 views

How to import CDN scripts into a web component?

Here is a simple code of web component I tried to had inside a summernote.js : This is just an example of using js files of components and using them inside a web component, but for some reason its ...
Aviv M's user avatar
  • 329
0 votes
1 answer
469 views

Lit Web Component - Trying to select element

I am trying to transform this element into a standard web component using Lit. (https://www.w3schools.com/howto/howto_js_image_comparison.asp) I totally new to Lit and to web components and am ...
Slaveworx's user avatar
  • 589
0 votes
0 answers
28 views

TypeScript, WebComponent - components deriving from different native elements, with custom base class

I just want to be able to have base custom class for components, but class for specific should deriving from specific hmtlelement. Ideally, the solution to my problem would be as follows: abstract ...
Jakub Szczeklik's user avatar
0 votes
1 answer
51 views

Extending custom webcomponent

I'm having some trouble extending a custom webcomponent onto another. I'm currently getting the following error: Uncaught ReferenceError: LinkedProducts is not defined I have two classes, in each of ...
Tobias Madsen's user avatar
1 vote
1 answer
172 views

web components - custom events on slotchange

can someone please explain what happens here? am I missing something? #handleClick() { this.dispatchEvent(new Event('onClicked')); } mySlot.addEventListener('slotchange', () => { mySlot....
Marouen Mhiri's user avatar
0 votes
2 answers
225 views

How do I compress inline css in the webpack bundle

I have an SPA using vanilla webcomponents, and I am struggling with compressing the inline css in the bundled js webpack output. Here's the module part of my webpack config: module: { rules: [ { ...
noontz's user avatar
  • 1,805
0 votes
0 answers
128 views

Cannonical way to create a constructable Stylsheet from an external stylesheet

I have a web component that requires to re-use external stylesheet. Reading: https://web.dev/constructable-stylesheets/, which was recently updated, it says: Gotchas In earlier versions of the ...
run_the_race's user avatar
  • 1,647
1 vote
1 answer
85 views

Browser parsing DOM vs JavaScript execution - Ensuring props are always found by web component

I have created the following pattern to initialize native web components with JSON information (props). Naming things is hard, so the advanatage of this pattern is that one does not have to add ID's ...
run_the_race's user avatar
  • 1,647
0 votes
0 answers
268 views

Use defineAsyncComponent with non-vue native web components

Is it possible to use defineAsyncComponent and dynamic <component> with non-vue native web components? Let's assume I have a web component, which was created with lit and now I want to use it ...
sunwarr10r's user avatar
  • 4,520
0 votes
1 answer
95 views

How to make a web component return a Proxy (and be extended)

The goal is to have a base class A extending HTMLElement that customizes getters and setters. Then class B would extend class A and do stuff. The way to do this is by wrapping class A with a proxy (...
daniel p's user avatar
  • 801
3 votes
2 answers
776 views

How to set dynamic observedAttributes

My goal is to set observedAttributes dynamically, so my web component will watch only attributes following a pattern, like a colon (:attr) <my-element static="value1" :dynamic=${dynamic}/&...
daniel p's user avatar
  • 801
0 votes
1 answer
1k views

How to change css variable in shadow dom (web component)

I can't manage to change a css variable (--color) because the shadowRoot querySelector won't return :host or html <style> :host {display: block; --color: ${this.color}; } ....
daniel p's user avatar
  • 801
0 votes
2 answers
609 views

How to make web component to redender specific elements upon property update

class MyElement extends HTMLElement { constructor() { super(); // Props this._color = this.getAttribute("color"); this._myArray = this.getAttribute("myArray"); ...
daniel p's user avatar
  • 801
0 votes
1 answer
113 views

Web component stylsheet is re-downloaded everytime an instance of it is created

I am making a pair of custom web components to show notifications. The wc-notifier is the parent, which creates wc-notifications on itself, there maybe multiple notifications shown at the same time, ...
run_the_race's user avatar
  • 1,647
0 votes
1 answer
152 views

how can i occupy the change event in shadow dom javascript

how could I propagate the change event in shadow dom javascript(web component), because when I try it this way I get into a loop. My idea is that the event is called change (because if I change its ...
estudiante's user avatar
0 votes
1 answer
2k views

How to insert an element into a web component's slot via JavaSCript

In the below examples, foo is the parent component, and bar is the child that fits into foo's slot. As you can see below I can slot an element if I place it in the HTML directly, but when I try slot ...
run_the_race's user avatar
  • 1,647
1 vote
3 answers
1k views

Render a native HTML template with JavaScript

With HTML Templates it makes it easy to stamp out snippets of html. What is a sane way of populating the stamped out templates? In the MDN link above they render the template as follows: td = ...
run_the_race's user avatar
  • 1,647
0 votes
2 answers
285 views

Create a BaseComponent for web components, and refer to component name once

I have noticed there are a few common/repeated methods I keep reusing in some web components I am working on. When I change the method in one, if I want the improvement in the others, I have to open ...
run_the_race's user avatar
  • 1,647
0 votes
0 answers
71 views

Web component setting property race condition

After a lot of digging I figured out sometimes if I set a property before the element is fully constructed, it overrides the setter. I found this helpful code on google developers: A developer might ...
run_the_race's user avatar
  • 1,647
0 votes
0 answers
134 views

Import a web component only after button click

I am planning to show a feedback popup using web components. Reason to use web component: Need to import it to multiple projects (Sort of a survey platform). I need to display the web component pop up ...
Anubhav Jha's user avatar
0 votes
1 answer
272 views

How can I add and remove Native web components based on viewport size?

I want to add/remove the web components from DOM based on viewport size, let's say I have component A, which I want to add on Desktop, and when I resize the window ( shift to mobile view ) I want it ...
shubham patil's user avatar
0 votes
1 answer
77 views

How to expose ctx from inside Webcomponent?

When I try to set the width and height of the canvas element in the draw function, it seems to be setting them on some canvas, but not the one I'm looking at. Upon inspection of the canvas with the ...
Tom M's user avatar
  • 2,845