Contact us Create app

Directory

← Back

css-observe

Fire a custom event whenever an element matching a specified selector is added.

Author

Rating

Links

Popularity

<100

Published on webcomponents.org

css-observe

Fire a custom event whenever an element matching a specified selector is added.

Syntax

Example

<script type="module" src="../css-observe.js"></script>
<css-observe id="myObserver" observe selector="div[test]"></css-observe>
<div test>
    I am here
</div>

css-observe will fire event: latest-match-changed, and the newly added element can be obtained from event.detail.value.

It will only observe the selector within the same Shadow DOM realm where the element is placed. If the element is placed outside any ShadowDOM, it will observe the selector only outside any ShadowDOM. How cool is that?

Implementation

Based off of an idea found here

Viewing Your Element

$ polymer serve

Running Tests

$ npm tests

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • xtal-latx#0.0.84
Released
2018-12-16
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

css-observe - Vaadin Add-on Directory

Fire a custom event whenever an element matching a specified selector is added. css-observe - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/css-observe) # css-observe Fire a custom event whenever an element matching a specified selector is added. ## Syntax ## Example ```html
I am here
``` css-observe will fire event: latest-match-changed, and the newly added element can be obtained from event.detail.value. It will only observe the selector within the same Shadow DOM realm where the element is placed. If the element is placed outside any ShadowDOM, it will observe the selector only outside any ShadowDOM. How cool is that? ## Implementation Based off of an idea found [here](https://davidwalsh.name/detect-node-insertion) ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests ``` $ npm tests ```
View on NPM
View on GitHub

css-observe version 0.0.0
### Dependencies

css-observe version 0.0.1
### Dependencies * xtal-latx#0.0.24

css-observe version 0.0.2
### Dependencies * xtal-latx#0.0.24

css-observe version 0.0.3
### Dependencies * xtal-latx#0.0.24

css-observe version 0.0.4
### Dependencies * xtal-latx#0.0.24

css-observe version 0.0.5
### Dependencies * xtal-latx#0.0.24

css-observe version 0.0.6
### Dependencies * xtal-latx#0.0.24

css-observe version 0.0.7
### Dependencies * xtal-latx#0.0.76

css-observe version 0.0.8
### Dependencies * xtal-latx#0.0.76

css-observe version 0.0.9
### Dependencies * xtal-latx#0.0.84

Online