Stack Overflow
Stack Overflow

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.

Native Web Components are elements registered in the DOM that can be reused in a page easily and encapsulate their scripts, templates and styles.

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

Please do not use this tag for component created by third-party frameworks like Polymer or Angular.

Web components rely on these browser features:

  • Custom Elements allow user defined elements to be created with an ES6 class that defines their behaviour 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.

  • HTML Imports were the recommended mechanism for creating and loading Web Components. Several browser manufactures will not support HTML Imports and these are not deprecated and replaced be ES6 Modules.

  • 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.

187 questions
31
votes
7 answers

How to have a 'connectedCallback' for when all child custom elements have been connected

I'm using Web Components v1. Suppose two Custom Elements: parent-element.html child-element.html I'm…
Ilmiont
  • 2,032
  • 4
  • 27
  • 44
23
votes
3 answers

can i pass function as attribute to web component?

I'm trying to create a native web component for input element. I wanted the component to have custom validation functionality, similar to polymer's paper-input custom validator function. I'm not sure if I can pass a custom validator function as…
PS.
  • 303
  • 1
  • 2
  • 8
22
votes
6 answers

How to communicate between Web Components (native UI)?

I'm trying to use native web components for one of my UI project and for this project, I'm not using any frameworks or libraries like Polymer etc. I would like to know is there any best way or other way to communicate between two web components like…
Sandeep
  • 1,028
  • 2
  • 13
  • 25
16
votes
2 answers

CSS: How to target ::slotted siblings in Shadow DOM root?

I know that the spec currently only allows compound selectors for ::slotted, i.e. ::slotted(my-first + my-second) is not allowed, but should something like this be working? ::slotted(x-first) + ::slotted(x-second) { /* css */ } Is there any way to…
spbks
  • 845
  • 3
  • 10
  • 18
10
votes
2 answers

What framework to use in order to build web components: lit-element vs stencil vs SkateJS?

I want to start leveraging http://webcomponents.me W3C standard which is now supported by all major web browsers. I researched the internet and so far I found following frameworks: Stencil - Created by ionic. All ionic components use this…
Danilo Puric
  • 779
  • 2
  • 13
  • 23
10
votes
4 answers

Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries

I spent some time searching but have only seen too many regular "walk the DOM" blogs or answers that only go one level UP with getRootnode() Pseudo code: HTML //# shadow-root //# shadow-root …
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
9
votes
1 answer

Typescript error "Property does not exist on type 'JSX.IntrinsicElements'" when using native web component

I'm working with a project that uses React and Typescript, but I want to start using native web components in my project to phase out some of my React components. I'm getting this error when I try to include use a person-info component in some of my…
Christopher Bradshaw
  • 2,615
  • 4
  • 24
  • 38
8
votes
3 answers

Can I get a button in Shadow DOM to submit a form not in Shadow DOM?

I just ran into an interesting situation where I have a submit
Intervalia
  • 10,248
  • 2
  • 30
  • 60
8
votes
2 answers

Overriding externally-defined styles in a web component

I'm taking my first steps into web components without using any third-party libraries, such as Polymer. One of the main selling points is that web component styles are separated from styles defined elsewhere, allowing the component's shadow-DOM to…
Scott
  • 5,338
  • 5
  • 45
  • 70
7
votes
1 answer

Slots does not work on a html web component without shadow dom

I have a html web component without shadow dom and I try to add a slot. For some reason it does not work. I expected it to switch "Foo bar" to "Hello world" but that does not happen. Does slots only works with shadow dom and a template? How can I…
Jens Törnell
  • 23,180
  • 45
  • 124
  • 206
7
votes
2 answers

Web Components: how to access a slotted element using shadowRoot.querySelector

Hi I am new to Web Components concept. I wanted to know if we can access a slotted element using shadowRoot.querySelector I have implemented an input field as slot for setting some values dynamically. And have a class added to it 'column-title'. I…
Treesa
  • 383
  • 3
  • 13
7
votes
4 answers

textContent empty in connectedCallback() of a custom HTMLElement

Within the connectedCallback() method of my custom element the textContent is returned as an empty string. Essentially my code boils down to the following... class MyComponent extends HTMLElement{ constructor() { super() …
Jonathan Williamson
  • 1,189
  • 2
  • 10
  • 17
6
votes
1 answer

Differences between ways to dynamically instantiate a web component

There are several ways a web component (autonomous custom elements only with regard to this question) can "come to life". Are there notable differences between the three options below? Option 1: const foo =…
Nils
  • 314
  • 3
  • 17
6
votes
1 answer

How do I assign a custom element's text contents to a template slot?

I'm creating some web components and would like to insert the contained text into a template slot. I'd like to make it slottable as opposed to simply copying their value so the browser can naturally handle changes to the text instead of having to…
tlitookilakin
  • 61
  • 2
6
votes
2 answers

How deal "connectedCallback may be called once your element is no longer connected" coding a Webcomponent

That statement pasted in my question was copied from https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks. As a no-experience developer with Webcomponent, I am trying to understand all…
Jim C
  • 3,957
  • 25
  • 85
  • 162
1
2 3
…
12 13