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.
192
questions
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 ...
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.
...
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('...
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" })...
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 ...
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<...
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&...
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 ...
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 ...
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 ...
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"...
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, ...
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 ...
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 ...
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
{
...
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 ...
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>
<...
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 (...
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 ...
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 ...
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 ...
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 ...
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 ...
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, ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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....
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: [
{
...
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 ...
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 ...
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 ...
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 (...
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}/&...
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};
}
....
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");
...
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, ...
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 ...
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 ...
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 = ...
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 ...
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 ...
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 ...
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 ...
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 ...