components

Author: tom-sapletta-com

COMPONENTS.md

@@ -0,0 +1,77 @@
+Element-defined content
+
+Custom elements can manage their own content by using the DOM APIs inside element code. Reactions come in handy for this.
+
+Example - create an element with some default HTML:
+    
+    customElements.define('x-foo-with-markup', class extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
+      }
+      ...
+    });
+
+Declaring this tag will produce:
+    
+    <x-foo-with-markup>
+     <b>I'm an x-foo-with-markup!</b>
+    </x-foo-with-markup>
+
+
+
+
+defining the DOM interface of <app-drawer>:
+    
+    class AppDrawer extends HTMLElement {
+    
+      // A getter/setter for an open property.
+      get open() {
+        return this.hasAttribute('open');
+      }
+    
+      set open(val) {
+        // Reflect the value of the open property as an HTML attribute.
+        if (val) {
+          this.setAttribute('open', '');
+        } else {
+          this.removeAttribute('open');
+        }
+        this.toggleDrawer();
+      }
+    
+      // A getter/setter for a disabled property.
+      get disabled() {
+        return this.hasAttribute('disabled');
+      }
+    
+      set disabled(val) {
+        // Reflect the value of the disabled property as an HTML attribute.
+        if (val) {
+          this.setAttribute('disabled', '');
+        } else {
+          this.removeAttribute('disabled');
+        }
+      }
+    
+      // Can define constructor arguments if you wish.
+      constructor() {
+        // If you define a constructor, always call super() first!
+        // This is specific to CE and required by the spec.
+        super();
+    
+        // Setup a click listener on <app-drawer> itself.
+        this.addEventListener('click', e => {
+          // Don't toggle the drawer if it's disabled.
+          if (this.disabled) {
+            return;
+          }
+          this.toggleDrawer();
+        });
+      }
+    
+      toggleDrawer() {
+        ...
+      }
+    }
+    
+    customElements.define('app-drawer', AppDrawer);

README.md

@@ -5,6 +5,26 @@ Libraries for apiunit implementation, works on js.apiunit.com
 
 Static files works on js.apiunit.com with nginx server
 
+## Standardy
+
+https://whatwg.org/
+
+webcomponents
+kompilatory
+
+    <template>
+https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
+
+    
+link - tylko chrome
+
+
+ecma scripts modules
+https://www.sitepoint.com/understanding-es6-modules/
+
+https://exploringjs.com/es6/ch_modules.html
+
+
 ## Apiunit
 rozwiązanie dla programistów szukających prostych rozwiązań
 a nie wchodzących co chwilę w nowe technologie a potem wszelkie zmiany i konflikty sprawiają dużo pośrednich problemów