@polymer/lit-element - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

CHANGELOG.md

@@ -15,2 +15,11 @@ # Change Log
 
+## [0.6.1] - 2018-09-17
+
+### Fixed
+* Fixes part rendering and css custom properties issues introduced with lit-html 0.11.3 by updating to 0.11.4 (https://github.com/Polymer/lit-element/issues/202).
+
+### Removed
+* Removed custom_typings for Polymer as they are no longer needed
+(https://github.com/Polymer/lit-element/issues/186).
+
 ## [0.6.0] - 2018-09-13
@@ -22,3 +31,3 @@
 ### Changed
-* Signficantly changed update/render lifecycle and property API. Render lifecycle
+* Significantly changed update/render lifecycle and property API. Render lifecycle
 is now `requestUpdate`, `shouldUpdate`, `update`, `render`, `firstUpdated`
@@ -25,0 +34,0 @@ (first time only), `updated`, `updateComplete`. Property options are now

package.json

 {
   "name": "@polymer/lit-element",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Polymer based lit-html custom element",
@@ -26,3 +26,4 @@ "license": "BSD-3-Clause",
     "@types/mocha": "^5.2.4",
-    "@webcomponents/webcomponentsjs": "^2.1.1",
+    "@webcomponents/shadycss": "^1.5.2",
+    "@webcomponents/webcomponentsjs": "^2.1.3",
     "chai": "^4.0.2",
@@ -43,3 +44,3 @@ "mocha": "^5.0.5",
   "dependencies": {
-    "lit-html": "^0.11.2"
+    "lit-html": "^0.11.4"
   },
@@ -46,0 +47,0 @@ "publishConfig": {

src/test/lit-element_styling_test.ts

@@ -18,3 +18,3 @@ /**
 import {
-  html,
+  html as htmlWithStyles,
   LitElement,
@@ -55,3 +55,3 @@ } from '../lit-element.js';
       render() {
-        return html`
+        return htmlWithStyles`
         <style>
@@ -73,3 +73,3 @@ div {
   test('shared styling rendered into shadowRoot is styled', async () => {
-    const style = html`<style>
+    const style = htmlWithStyles`<style>
       div {
@@ -82,3 +82,3 @@ border: 4px solid blue;
       render() {
-        return html`
+        return htmlWithStyles`
         <style>
@@ -104,3 +104,3 @@ div {
       render() {
-        return html`
+        return htmlWithStyles`
         <style>
@@ -127,3 +127,3 @@ :host {
       render() {
-        return html`
+        return htmlWithStyles`
         <style>
@@ -142,3 +142,3 @@ div {
       render() {
-        return html`
+        return htmlWithStyles`
         <style>
@@ -172,3 +172,3 @@ x-inner {
            render() {
-             return html`
+             return htmlWithStyles`
         <style>
@@ -187,3 +187,3 @@ div {
            render() {
-             return html`
+             return htmlWithStyles`
         <style>
@@ -204,3 +204,3 @@ x-inner1 {
            render() {
-             return html`
+             return htmlWithStyles`
         <style>
@@ -240,3 +240,3 @@ x-inner1 {
       render() {
-        return html`
+        return htmlWithStyles`
         <style>
@@ -254,3 +254,3 @@ div {
       render() {
-        return html`
+        return htmlWithStyles`
         <style>
@@ -283,2 +283,68 @@ x-inner2 {
   });
+
+  test(
+      '@apply renders in nested elements when sub-element renders separately first',
+      async () => {
+        class I extends LitElement {
+          render() {
+            return htmlWithStyles`
+        <style>
+          :host {
+            display: block;
+            width: 100px;
+            height: 100px;
+            border: 2px solid black;
+            margin-top: 10px;
+            @apply --bag;
+          }
+        </style>Hi`;
+          }
+        }
+        customElements.define('x-applied', I);
+
+        const name = generateElementName();
+        class E extends LitElement {
+          applied: HTMLElement|undefined;
+
+          render() {
+            return htmlWithStyles`
+        <style>
+          :host {
+            --bag: {
+              border: 10px solid black;
+              margin-top: 2px;
+            }
+          }
+        </style>
+        <x-applied></x-applied>`;
+          }
+
+          firstUpdated() {
+            this.applied =
+                this.shadowRoot!.querySelector('x-applied') as LitElement;
+          }
+        }
+        customElements.define(name, E);
+
+        const firstApplied = document.createElement('x-applied') as I;
+        container.appendChild(firstApplied);
+        const el = document.createElement(name) as E;
+        container.appendChild(el);
+
+        // Workaround for Safari 9 Promise timing bugs.
+        await firstApplied.updateComplete && el.updateComplete &&
+            await (el.applied as I)!.updateComplete;
+
+        await nextFrame();
+        assert.equal(
+            getComputedStyleValue(firstApplied!, 'border-top-width').trim(),
+            '2px');
+        assert.equal(getComputedStyleValue(firstApplied!, 'margin-top').trim(),
+                     '10px');
+        assert.equal(
+            getComputedStyleValue(el.applied!, 'border-top-width').trim(),
+            '10px');
+        assert.equal(getComputedStyleValue(el.applied!, 'margin-top').trim(),
+                     '2px');
+      });
 });
@@ -310,3 +376,3 @@
            render() {
-             return html`
+             return htmlWithStyles`
         <style>
@@ -313,0 +379,0 @@ div {

test/lit-element_styling_test.js

@@ -15,3 +15,3 @@ /**
 import '@webcomponents/shadycss/apply-shim.min.js';
-import { html, LitElement, } from '../lit-element.js';
+import { html as htmlWithStyles, LitElement, } from '../lit-element.js';
 import { generateElementName, getComputedStyleValue, nextFrame } from './test-helpers.js';
@@ -34,3 +34,3 @@ const assert = chai.assert;
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -51,3 +51,3 @@ div {
     test('shared styling rendered into shadowRoot is styled', async () => {
-        const style = html `<style>
+        const style = htmlWithStyles `<style>
       div {
@@ -60,3 +60,3 @@ border: 4px solid blue;
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -81,3 +81,3 @@ div {
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -103,3 +103,3 @@ :host {
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -120,3 +120,3 @@ div {
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -145,3 +145,3 @@ x-inner {
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -162,3 +162,3 @@ div {
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -178,3 +178,3 @@ x-inner1 {
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -207,3 +207,3 @@ x-inner1 {
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -224,3 +224,3 @@ div {
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -248,2 +248,52 @@ x-inner2 {
     });
+    test('@apply renders in nested elements when sub-element renders separately first', async () => {
+        class I extends LitElement {
+            render() {
+                return htmlWithStyles `
+        <style>
+          :host {
+            display: block;
+            width: 100px;
+            height: 100px;
+            border: 2px solid black;
+            margin-top: 10px;
+            @apply --bag;
+          }
+        </style>Hi`;
+            }
+        }
+        customElements.define('x-applied', I);
+        const name = generateElementName();
+        class E extends LitElement {
+            render() {
+                return htmlWithStyles `
+        <style>
+          :host {
+            --bag: {
+              border: 10px solid black;
+              margin-top: 2px;
+            }
+          }
+        </style>
+        <x-applied></x-applied>`;
+            }
+            firstUpdated() {
+                this.applied =
+                    this.shadowRoot.querySelector('x-applied');
+            }
+        }
+        customElements.define(name, E);
+        const firstApplied = document.createElement('x-applied');
+        container.appendChild(firstApplied);
+        const el = document.createElement(name);
+        container.appendChild(el);
+        // Workaround for Safari 9 Promise timing bugs.
+        await firstApplied.updateComplete && el.updateComplete &&
+            await el.applied.updateComplete;
+        await nextFrame();
+        assert.equal(getComputedStyleValue(firstApplied, 'border-top-width').trim(), '2px');
+        assert.equal(getComputedStyleValue(firstApplied, 'margin-top').trim(), '10px');
+        assert.equal(getComputedStyleValue(el.applied, 'border-top-width').trim(), '10px');
+        assert.equal(getComputedStyleValue(el.applied, 'margin-top').trim(), '2px');
+    });
 });
@@ -271,3 +321,3 @@ suite('ShadyDOM', () => {
             render() {
-                return html `
+                return htmlWithStyles `
         <style>
@@ -274,0 +324,0 @@ div {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

549550

decreased by-1.25%

Dev dependency count

16

increased by6.67%

Number of package files

57

decreased by-1.72%

Lines of code

6920

decreased by-3.37%

Dependency changes

• Updatedlit-html@^0.11.4