ta-dom-components - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

package.json

 {
   "name": "ta-dom-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "another web-component library",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -24,5 +24,6 @@ ## Ta-Dom! 🎉  Components ##
 // define your element's class
-MyElement extends TaDom.TaDomElement {
+export class MyElement extends TaDom.TaDomElement {
 
   // define a static getter for your css
+  // alternatively, return a link() element
   static get css() {
@@ -83,3 +84,6 @@ return `
 // register your element
-TaDom.customElement('myElement', 'my-element', MyElement);
+TaDom.customElement('my-element', MyElement);
 ```
+
+##### More Examples #####
+Check out this [flash card game](https://github.com/jrobinson01/flash-cards) built with Ta-Dom! Components

ta-dom-element.js

@@ -66,3 +66,2 @@ import TaDom from '/node_modules/ta-dom/index.js';
     const props = {};
-    // const observedAttributes = [];
     this.computedProps_ = [];
@@ -95,2 +94,3 @@ for(let key in sProps) {
 
+  // handle attribute changes
   attributeChangedCallback(attribute, oldVal, newVal) {
@@ -123,13 +123,25 @@ if (newVal !== oldVal) {
   // replaces the entire style sheet
-  // TODO: fix that?
-  // Keep a virtual copy of the style as an object
-  // provide updates via js object?
   updateStyles(newStyle) {
+    // first render
     if (!this.styles) {
       // append style!
-      const css = style({}, newStyle);
+      let css;
+      // if inline string, create a style element
+      if (typeof newStyle === 'string') {
+        css = style(newStyle);
+      } else {
+        // if a link element is passed, append
+        css = newStyle;
+      }
+      // const css = style({}, newStyle);
       this.styles = css;
       this.shadowRoot.prepend(css);
     } else {
-      this.styles = compareNodes(style({}, newStyle), this.styles);
+      if (typeof newStyle === 'string') {
+        this.styles = compareNodes(style({}, newStyle), this.styles);
+      } else {
+        // it's an element
+        this.styles = compareNodes(newStyle, this.styles);
+      }
+
     }
@@ -136,0 +148,0 @@ }

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

Improved metrics

Total package byte prevSize

11311

increased by4.35%

Lines of code

258

increased by4.45%

Number of lines in readme file

88

increased by4.76%

No dependency changes