deep-query-selector-all
v1.1.0
Published
Use QuerySelectorAll and also find elements inside web components and slots
Downloads
15
Maintainers
Readme
DeepQuerySelectorAll
deepQuerySelectorAll is like querySelectorAll but also finds elements inside web components and slots
With the standard querySelector
and querySelectorAll
function, you can't find elements inside
web components. Those elements are hidden inside the Shadow DOM.
With deepQuerySelectorAll
you can find those elements.
It will find elements that are part of the web page, elements that are part of
web components and elements that are inserted using slots.
This can be useful when using web components from third parties and there is no API available to make desired changes to those web components.
WARNING: Don't use this with web components you own or you can control. If you want to make a
change or read data inside a web component, add this functionality to the web component API and use that functionality.
If you still use deepQuerySelectorAll
on your own web components because it's quick and easy,
you'll lose all claims to call yourself a respectable developer.
Installation
npm install --save-dev deep-query-selector-all
API
deepQuerySelectorAll(query [, rootElement])
Parameters
| Name | Type | Description |
|---------|------------------------|----------------------------------------------|
| query | string | Query to use, similar to querySelectorAll
|
| rootElement | Element (optional) | Root element to query, document
by default |
Example
Find all div
's with classname product
, even when inside webcomponents.
import {deepQuerySelectorAll} from "deep-query-selector-all";
const productElements = deepQuerySelectorAll("div.product");
Demo
In the repository, you can find a demo
directory with a webpage that
demonstrates the use of deepQuerySelectorAll
.
License
Copyright 2023 Edwin Martin and released under the MIT license.