Stack Overflow
Stack Overflow

Questions tagged [web-component]

Web components are reusable client-side elements made using native code or third party libraries.

Web Components are W3C standard custom elements that can be reused in a page easily and encapsulate their scripts, templates and styles.

Some browsers still require one of more polyfill to work with Web Components.

is for component written natively or with any library or framework. is for native components only.

Web components rely on one or more of these browser features:

  • Custom Elements allow user defined elements to be created with an ES6 class that defines their behavior and functionality. For instance if you wanted to create <my-element> (naming convention is always at least 1 hyphen) for a class called MyElement you could call: customElements.define('my-element', MyElement); Custom Elements are the only required portion of a Web Component.

  • Shadow DOM allows a section of the page document to be a new, self-contained element. Styles and scripts do not cascade in or out by default, and the 'shadow' DOM (written by the component author) is kept separate from the 'light' DOM (written by the developer using the component). <slot> provides an insertion point for the light content. attachShadow() allows a <template> to be provided for the component's HTML.

  • The <template> element enables chunk of markup to be use as a template to add content to the DOM. The markup in the template element is parsed but is not displayed and does not "run." For example, scripts in the template element are not executed. As of 2018 Web Components are moving away from HTML imports to ES6 Modules and the <template> element is not used as often in JavaScript based components.

  • ES6 Modules are currently the recommended mechanism for loading Web Components. Your component is now created in a JavaScript file and loaded using import statement.

Web Components are client side, but not all are user interface related. For instance web worker and IndexedDB clients can be written as components.

3655 questions
94
votes
2 answers

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?
Hmoo_oomH
  • 1,045
  • 1
  • 9
  • 9
85
votes
1 answer

What do /deep/ and ::shadow mean in a CSS selector?

In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools: I've also seen a selector with pseudo selector ::shadow. So, what do /deep/ and ::shadow in a CSS selector mean?
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
82
votes
2 answers

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 how to implement an image slider as an example…
jon
  • 5,961
  • 8
  • 35
  • 43
66
votes
8 answers

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 since April(2017) and there's a pesky bug I'd like…
Andrew
  • 3,393
  • 4
  • 25
  • 43
55
votes
1 answer

Do Custom Elements require a dash in their name?

Is it possible to name your own custom elements , , or others without the use of a dash? Can use define elements without them?
addyo
  • 2,798
  • 1
  • 14
  • 21
50
votes
6 answers

Web Components, pass data to and from

My understanding is that data is passed to a custom html element via its attributes and sent out by dispatching a CustomEvent. JavaScript objects can obviously be sent out in the event's detail field, but what if the element needs a lot of data…
Johan Lundquist
  • 571
  • 1
  • 5
  • 8
50
votes
2 answers

How do you inspect CSS variables in the browser?

I am defining my variables as per the spec like so: :root { --my-colour: #000; } And accessing them like this: .my-element { background: var( --my-colour ); } Which works fine. However I was wondering if there was a way of debugging or…
Paul. B
  • 1,328
  • 1
  • 13
  • 22
48
votes
10 answers

How to get list of registered custom elements

I'm trying to detect whether a custom element with a specific name was registered or not. Is there a way to make such check? Or is there a way to get list of registered custom elements? I do document.registerElement, but what else is there? Is it…
dy_
  • 6,462
  • 5
  • 24
  • 30
47
votes
0 answers

Pros and Cons of Facebook's React vs. Web Components (Polymer)

What are the main benefits of Facebook's React over the upcoming Web Components spec and vice versa (or perhaps a more apples-to-apples comparison would be to Google's Polymer library)? According to this JSConf EU talk and the React homepage, the…
CletusW
  • 3,890
  • 1
  • 27
  • 42
41
votes
6 answers

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 remove and add input elements dynamically in such a…
Martin Shishkov
  • 2,709
  • 5
  • 27
  • 44
40
votes
1 answer

How to safely load Polymer in unknown environment - multiple versions or namespace?

I have elements built with Polymer which needs to run on multiple sites (a widget) which: Don't have Polymer included (fine, I can include) Polymer already included at a compatible version (brilliant, unlikely) Polymer at an unknown version (too…
Adam Heath
  • 4,703
  • 2
  • 35
  • 50
40
votes
4 answers

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 bits edited out, the shadow DOM markup for this…
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
37
votes
3 answers

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 = `
John Doe
  • 2,225
  • 6
  • 16
  • 44
37
votes
1 answer

Difference between constructor and connectedCallback in custom elements v1

I am new to web development and recently I have been seeing much debate and talks about Custom Elements v1. They allow you to define your own elements with their own custom behaviors and if Shadow DOM is used, with scoped styles. When I was…
Shashank
  • 503
  • 1
  • 5
  • 7
37
votes
2 answers

How can I share an Angular 2 component between multiple Angular 2 projects?

Ideally, I'd like to create a stand-alone Angular 2 component (with tests) and then re-use it between two or three different Angular 2 sites. What are the good ways to achieve this? And a bonus question - do any 3rd party Angular 2 components exist?…
Sergey Aldoukhov
  • 22,316
  • 18
  • 72
  • 99
1
2 3
…
99 100