xtal-match-media | Vaadin

Custom Element that watches for media matches

Published on webcomponents.org


Web component that watches for media matches and fires events when they happen.

This is similar to Polymer's iron-media-query, but with no legacy dependencies. xtal-match-media can partake in Polymer's powerful binding.

Other alternatives are also available (the more the merrier):

lit-media-query (https://www.webcomponents.org/element/lit-media-query)

  <p-d on="matches-media-query-changed" prop="textContent"></p-d>
  <script type="module" src="https://unpkg.com/p-d.p-u@0.0.105/p-d.js?module"></script>
    <script type="module" src="https://unpkg.com/xtal-match-media@0.0.5/xtal-match-media.js?module"></script>
``` -->

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve


Link to this version
ImportedReleased 05 June 2018MIT License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install xtal-match-media"@0.0.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.0


  • @polymer/polymer#^3.0.0