document.querySelector with Web Components

Show how do you query shadowdom?

<div><my-component><button>Hello</button></my-component></div>
document.querySelector('button') // won't work
document.querySelector('my-component').shadowRoot.querySelector('button')

--

--

--

I really like building stuff with React.js and Docker and also Meetups ❤

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Simper

Kevin Simper

I really like building stuff with React.js and Docker and also Meetups ❤

More from Medium

Using JavaScript Only, you can build <custom-counter> component

JS/TS — add and remove eventlisteners properly without loosing the “this” context

Minimize extracted CSS file using Webpack. (CssMinimizerWebpackPlugin)

Minimal Setup for Typescript + HTML5 Development