423 questions
39
votes
1
answer
25k
views
::slotted CSS selector for nested children in shadowDOM slot [duplicate]
The CSS ::slotted selector selects children of the <slot> element.
However, when trying to select grandchildren like with ::slotted(*), ::slotted(*) *, or ::slotted(* *), the selector doesn't ...
- 8,752
33
votes
4
answers
77k
views
How to get element in user-agent shadow root with JavaScript?
I need get elements from Shadow DOM and change it. How i can do it?
<div>
<input type="range" min="100 $" max="3000 $">
</div>
- 1,502
11
votes
1
answer
2k
views
wait for Element Upgrade in connectedCallback: FireFox and Chromium differences
Update 2024
Full blogpost:
https://dev.to/dannyengelman/web-component-developers-do-not-connect-with-the-connectedcallback-yet-4jo7
Update March 2023
Note: this works because in the next tick your N (...
- 21.5k
41
votes
4
answers
62k
views
Is it possible to access Shadow DOM elements through the parent document?
This question is more aimed at user-created shadow DOM elements, but for accessibility I'll use the date input type for this question:
Say for example I have a date input on my page. With a couple of ...
- 129k
90
votes
10
answers
160k
views
Override styles in a shadow-root element
Is there a way to change styles found in a shadow element? Specifically, extend/overwrite some properties found in a css class? I am using a chrome-extension called Beanote which hasn't been updated ...
- 3,673
43
votes
3
answers
17k
views
How to separate web components to individual files and load them?
I have a web component x-counter, which is in a single file.
const template = document.createElement('template');
template.innerHTML = `
<style>
button, p {
display: inline-block;
...
- 2,521
8
votes
1
answer
2k
views
Nested element (web component) can't get its template
I made a simple example using Web Components with two custom elements (v1) where one is nested in another.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
...
- 113
84
votes
2
answers
10k
views
What is the ::content/::slotted pseudo-element and how does it work?
This is impossible to Google for because every article talking about the :before and :after pseudo-elements seems to use the word 'content'.
I heard about it in this CSS-Tricks article, explaining ...
- 6,251
9
votes
2
answers
5k
views
How to let imported css font / icons have effects on elements in the shadow dom?
Say if I want to create a custom element using shadow dom. Some elements in the template have class names specified in the linked css file. Now I want to let the css rules have effects on the elements....
- 1,073
41
votes
6
answers
98k
views
How to implement a dynamic form with controlled components in ReactJS?
As I am looking at the examples in the reference for controlled form components in react.js official website, I am wondering how is one supposed to implement a form in which you would be able to ...
- 2,847
58
votes
2
answers
17k
views
Do Custom Elements require a dash in their name?
Is it possible to name your own custom elements <date>, <person>, <city> or others without the use of a dash? Can use define elements without them?
- 2,938
6
votes
2
answers
6k
views
Registering a custom element from a chrome extension
I have tried registering custom elements through native javascript and polymer from within a chrome extension with no luck. The issue is documented here.
Uncaught NotSupportedError: Failed to execute ...
- 5,884
10
votes
2
answers
10k
views
How to create new instance of an extended class of custom elements
I'm trying the example from google developer site and I'm getting Error: "TypeError: Illegal constructor.
What's wrong and How to fix it?
class FancyButton extends HTMLButtonElement {
constructor() ...
- 1,532
7
votes
1
answer
4k
views
Does Angular2 use Web Components?
I've heard a lot of talk about the second coming of Angular and there seems to be a lot of fantastic things coming out of it but I know that Angular 1.0 does not have out of the box integration for ...
- 213
96
votes
3
answers
48k
views
Is Shadow DOM fast like Virtual DOM in React.js?
Does implementing Shadow DOM in my projects will make them faster like virtual DOM that's used by React?
- 1,065