{"bugs":{"url":"https://github.com/Polymer/lit-element/issues"},"dist":{"shasum":"da10b703b52a6ed44d0620490cc737897115e5fa","tarball":"https://registry.npmjs.org/@polymer/lit-element/-/lit-element-0.6.0-dev.3.tgz","fileCount":47,"integrity":"sha512-oVl5ZWSE6F7FptIquzzcDxNlxefu8RMEzJ5Ko/OeP7ce1VDcape7UDeKIX+cgJVz8+SdOXpXpBUBFuWKPiwTNg==","signatures":[{"sig":"MEUCIQCudCBcjwbrZIHO7fLYL4iZbuYLGcIEKAhAXZ9vH3mULwIgWxlmH6A70TSlUD+SkZeoACMSsulEp8dQ7VhjTe0yIuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdLdXCRA9TVsSAnZWagAAkEcP/2XAChEMWaJUyV4TWiVd\nzEQoecIn7aROG0HZMIyGPvcSC7KXxwI3DOGHg6dE8s9ERE4V6IjdfH6/JVCm\nmeVrz5BUUzAf0l/doE87oOndfiewD3tmxdnxaSC5AMEp99LG9sUPfWmwnH+i\nYJglWlK9A5iQzIQudzbegaiA2ZOOj14x+U1EUS89I6HYUxP1+jLE7yKCz8mA\nEy5meka7tSbspwKOWPCDrFUgp2lGro/P73j1Q1WhGA8j+sgd7rmwuL3lOUaE\nufyyctzhWEqqN49H7jVvXhT49y7CfLkj+e7uJJkc7trv/IgkQ80pCBls6E91\nCCgJFkOAkhmhsGehpGaGXnEvyKS8bsr4lZTsaSs6L/3CzAHNoklCbeQ7qaYU\nTIA5NnXpV/9jspK+5QGBVeMNHUOOgJf9EbVWCLxuFlJsauJjo+4HOA6XLiTS\n9QBZJ/LgVfM571apHLFREaExvoUntBm03L1VDZf2VRLwZ+0zye8JdCwUHhTx\n1btWh2ENDFIZVVsvGW/++lbeIVeF1QDDd/xg+QnM1d/CAxBg+409nlQ2GGgH\njI7PZobnSABkCh66BxL8morMNsyJ3JcosJmbnX4HMOn236LTzzbeOC612A5I\nWrGD8NmokI2zLE1FrIYD8gfejMMbvrioFJo6iEpgD1jQociQJ2SSqUa8kGlh\nVY0s\r\n=SP8S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lit-element.js","name":"@polymer/lit-element","author":{"name":"The Polymer Authors"},"module":"lit-element.js","readme":"> ## 🛠 Status: In Development\n> LitElement is currently in development. It's on the fast track to a 1.0 release, so we encourage you to use it and give us your feedback, but there are things that haven't been finalized yet and you can expect some changes.\n\n# LitElement\n\n[![Published on npm](https://img.shields.io/npm/v/@polymer/lit-element.svg)](https://www.npmjs.com/package/@polymer/lit-element)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@polymer/lit-element)\n\n## A simple base class for creating custom elements rendered with lit-html.\n\nLitElement uses [lit-html](https://github.com/Polymer/lit-html) to render into the\nelement's [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\nand adds API help manage element properties and attributes. LitElement reacts to changes in properties\nand renders declaratively using `lit-html`.\n\n  * **Setup properties:** LitElement supports observable properties which may trigger an\n  update when set. These properties can be written in a few ways:\n\n    * As class fields with the `@property()` [decorator](https://github.com/tc39/proposal-decorators#decorators),\n    if you're using a compiler that supports them, like TypeScript or Babel.\n    * With a static `properties` getter.\n    * By manually writing getters and setters. This can be useful if tasks should\n    be performed when a property is set, for example validation. You can call `invalidate()`\n    in the setter to trigger an update.\n\n    Properties can be given an options argument which is an object that describes how to\n    process the property. This can be done either in the `@property({...})` decorator or in the\n    object returned from the `properties` getter, e.g. `static get properties { return { foo: {...} }`.\n\n    Property options include:\n\n    * `attribute`: Describes how and if the property becomes an observed attribute.\n    If the value is false, the property is not added to `observedAttributes`.\n    If true or absent, the lowercased property name is observed (e.g. `fooBar` becomes `foobar`).\n    If a string, the string value is observed (e.g `attribute: 'foo-bar'`).\n    * `type`: Describes how to serialize and deserialize the attribute to/from a property.\n    If this value is a function, it is used to deserialize the attribute value\n    a the property value. If it's an object, it can have keys for `fromAttribute` and\n    `toAttribute` where `fromAttribute` is the deserialize function and `toAttribute`\n    is a serialize function used to set the property to an attribute. If no `toAttribute`\n    function is provided and `reflect` is set to true, the property value is set\n    directly to the attribute.\n    * `reflect`: Describes if the property should reflect to an attribute.\n    If true, when the property is set, the attribute is set using the\n    attribute name determined according to the rules for the `attribute`\n    propety option and the value of the property serialized using the rules from\n    the `type` property option.\n    * `shouldInvalidate`: Describes if setting a property should trigger\n    invalidation and updating. This function takes the `newValue` and `oldValue` and\n    returns true if invalidation should occur. If not present, a strict identity\n    check is used. This is useful if a property should be considered dirty only\n    if some condition is met, like if a key of an object value changes.\n\n  * **React to changes:** LitElement reacts to changes in properties and attributes by\n  asynchronously rendering, ensuring changes are batched. This reduces overhead\n  and maintains consistent state.\n\n  * **Declarative rendering** LitElement uses `lit-html` to declaratively describe\n  how an element should render. Then `lit-html` ensures that updates\n  are fast by creating the static DOM once and smartly updating only the parts of\n  the DOM that change. Pass a JavaScript string to the `html` tag function,\n  describing dynamic parts with standard JavaScript template expressions:\n\n    * static elements: ``` html`<div>Hi</div>` ```\n    * expression: ``` html`<div>${disabled ? 'Off' : 'On'}</div>` ```\n    * attribute: ``` html`<div class$=\"${color} special\"></div>` ```\n    * event handler: ``` html`<button on-click=\"${(e) => this._clickHandler(e)}\"></button>` ```\n\n## Getting started\n\n * The easiest way to try out LitElement is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/lit-element-example?file=index.js), [Glitch](https://glitch.com/edit/#!/hello-lit-element?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSFiddle](https://jsfiddle.net/j6mf6gpo/), [JSBin](http://jsbin.com/zezilad/edit?html,output),\n [CodePen](https://codepen.io/sorvell/pen/BxZgPN).\n\n * You can also copy [this HTML file](https://gist.githubusercontent.com/sorvell/48f4b7be35c8748e8f6db5c66d36ee29/raw/2427328cf1ebae5077902a6bff5ddd8db45e83e4/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n * When you're ready to use LitElement in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) to and using its development server as follows.\n\n    1. Add LitElement to your project:\n\n        ```npm i @polymer/lit-element```\n\n    1. Create an element by extending LitElement and calling `customElements.define` with your class (see the examples below).\n\n    1. Install the Polymer CLI:\n\n        ```npm i -g polymer-cli@next```\n\n    1. Run the development server and open a browser pointing to its URL:\n\n        ```polymer serve```\n\n    > LitElement is published on [npm](https://www.npmjs.com/package/@polymer/lit-element) using JavaScript Modules.\n    This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n    >\n    > However, since LitElement uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n    Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle LitElement.\n\n\n## Minimal Example\n\n  1. Create a class that extends `LitElement`.\n  1. Use a `@property` decorator to create a property (or implement a static `properties`\n  getter that returns the element's properties). (which automatically become observed attributes).\n  1. Then implement a `render()` method and use the element's\ncurrent properties to return a `lit-html` template result to render\ninto the element. This is the only method that must be implemented by subclasses.\n\n```html\n  <script src=\"node_modules/@webcomponents/webcomponents-bundle.js\"></script>\n  <script type=\"module\">\n    import {LitElement, html} from '@polymer/lit-element';\n\n    class MyElement extends LitElement {\n\n      @property({type: String})\n      mood = 'happy';\n\n      render() {\n        return html`<style> .mood { color: green; } </style>\n          Web Components are <span class=\"mood\">${this.mood}</span>!`;\n      }\n\n    }\n\n    customElements.define('my-element', MyElement);\n  </script>\n\n  <my-element mood=\"happy\"></my-element>\n```\n\n## API Documentation\n\nSee the [source](https://github.com/PolymerLabs/lit-element/blob/master/src/lit-element.ts#L90)\n for detailed API info, here are some highlights.\n\n  * `createRenderRoot()` (protected): Implement to customize where the\n  element's template is rendered by returning an element into which to\n  render. By default this creates a shadowRoot for the element.\n  To render into the element's childNodes, return `this`.\n\n  * `shouldUpdate(changedProperties)` (protected): Implement to control if updating and rendering\n  should occur when property values change or `invalidate` is called. The `changedProps`\n  argument is an object with keys for the changed properties pointing to their previous values.\n  By default, this method always returns true, but this can be customized as\n  an optimization to avoid updating work when changes occur, which should not be rendered.\n\n  * `update()` (protected): This method calls `render()` and then uses `lit-html` to\n  render the template DOM. Override to customize how the element renders DOM. Note,\n  during `update()` setting properties does not trigger `invalidate()`, allowing\n  property values to be computed and validated.\n\n  * `render()` (protected): Implement to describe the element's DOM using `lit-html`. Ideally,\n  the `render` implementation is a pure function using only the element's current properties\n  to describe the element template. This is the only method that must be implemented by subclasses.\n  Note, since `render()` is called by `update()` setting properties does not trigger\n  `invalidate()`, allowing property values to be computed and validated.\n\n  * `finishUpdate(changedProperties): Promise?` (protected): Called after element DOM has been updated and\n  before the `updateComplete` promise is resolved. Implement to directly control rendered DOM.\n  Typically this is not needed as `lit-html` can be used in the `render` method\n  to set properties, attributes, and event listeners. However, it is sometimes useful\n  for calling methods on rendered elements, for example focusing an input:\n  `this.shadowRoot.querySelector('input').focus()`. The `changedProps` argument is an object\n  with keys for the changed properties pointing to their previous values. If this function\n  returns a `Promise`, it will be *awaited* before resolving the `updateComplete` promise.\n  Setting properties in `finishUpdate()` does trigger `invalidate()` and blocks\n  the `updateComplete` promise.\n\n  * `finishFirstUpdate(changedProperties): Promise?` (protected) Called after element DOM has been\n  updated the first time. This method can be useful for capturing references to rendered static\n  nodes that must be directly acted upon, for example in `finishUpdate`.\n\n  * `updateComplete`: Returns a promise which resolves after the element next renders.\n\n  * `invalidate`: Call to request the element to asynchronously update regardless\n  of whether or not any property changes are pending.\n\n## Update Lifecycle\n\n* When the element is first connected or a property is set (e.g. `element.foo = 5`)\n  and the property's `shouldInvalidate(value, oldValue)` returns true. Then\n  * `invalidate()` tries to update the element after waiting a [microtask](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) (at the end\n  of the event loop, before the next paint). Then\n    * `shouldUpdate(changedProps)` is called and if this returns true which it\n      does by default:\n      * `update(changedProps)` is called to update the element.\n        Note, setting properties inside `update()` will set their values but\n        will *not* trigger `invalidate()`. This calls\n        * `render()` which should return a `lit-html` TemplateResult\n          (e.g. <code>html\\`Hello ${world}\\`</code>)\n      * `finishUpdate(changedProps)` is then called to do post update/render tasks.\n        Note, setting properties here will trigger `invalidate()` and block\n        the `updateComplete` promise.\n    * `updateComplete` promise is resolved only if the element is\n      not in an invalid state.\n* Any code awaiting the element's `updateComplete` promise runs and observes\n  the element in the updated state.\n\n## Bigger Example\n\n```JavaScript\nimport {LitElement, html} from '@polymer/lit-element';\n\nclass MyElement extends LitElement {\n\n  // Public property API that triggers re-render (synced with attributes)\n  @property()\n  foo = 'foo';\n\n  @property({type: Number})\n  whales = 5;\n\n  constructor() {\n    super();\n    this.addEventListener('click', async (e) => {\n      this.whales++;\n      await this.updateComplete;\n      this.dispatchEvent(new CustomEvent('whales', {detail: {whales: this.whales}}))\n    });\n  }\n\n  // Render method should return a `TemplateResult` using the provided lit-html `html` tag function\n  render() {\n    return html`\n      <style>\n        :host {\n          display: block;\n        }\n        :host([hidden]) {\n          display: none;\n        }\n      </style>\n      <h4>Foo: ${this.foo}</h4>\n      <div>whales: ${'🐳'.repeat(this.whales)}</div>\n      <slot></slot>\n    `;\n  }\n\n}\ncustomElements.define('my-element', MyElement);\n```\n\n```html\n  <my-element whales=\"5\">hi</my-element>\n```\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.\n\n## Known Issues\n\n","gitHead":"5f3cffd87215ca4d9ce6d688bf16fabd727efe78","license":"BSD-3-Clause","scripts":{"lint":"tslint --project ./","test":"npm run build && wct","build":"tsc","format":"find src test | grep '\\.js$\\|\\.ts$' | xargs clang-format --style=file -i","gen-docs":"typedoc --readme none --mode modules --excludeNotExported --excludePrivate --exclude **/*_test.ts --out ./docs/api .","checksize":"uglifyjs lit-element.js -mc --toplevel | gzip -9 | wc -c","prepublishOnly":"npm run build","regen-package-lock":"rm -rf node_modules package-lock.json; npm install"},"typings":"lit-element.d.ts","_npmUser":{"name":"sorvell","email":"sorvell@google.com"},"homepage":"https://github.com/Polymer/lit-element#readme","repository":{"url":"git+https://github.com/Polymer/lit-element.git","type":"git"},"_npmVersion":"6.3.0","description":"Polymer based lit-html custom element","directories":{"test":"test"},"maintainers":[{"name":"aomarks","email":"aomarks@google.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"justinfagnani","email":"justin@fagnani.com"},{"name":"keanulee","email":"npm@keanulee.com"},{"name":"notwaldorf","email":"notwaldorf@gmail.com"},{"name":"polymer-devs","email":"admin@polymer-project.org"},{"name":"sorvell","email":"sorvell@google.com"},{"name":"usergenic","email":"brendan@usergenic.com"}],"_nodeVersion":"8.5.0","dependencies":{"lit-html":"dev"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.0.2","mocha":"^5.0.5","tslint":"^5.7.0","typedoc":"^0.8.0","uglify-es":"^3.3.9","typescript":"^3.0.1","@types/chai":"^4.0.1","@types/mocha":"^5.2.4","wct-browser-legacy":"^1.0.1","web-component-tester":"^6.7.1","@webcomponents/webcomponentsjs":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/lit-element_0.6.0-dev.3_1534375767336_0.5460835589268387","host":"s3://npm-registry-packages"},"_id":"@polymer/lit-element@0.6.0-dev.3","version":"0.6.0-dev.3"}