shadow-dom-element - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

custom-elements.json

@@ -13,2 +13,3 @@ {
           "name": "ShadowDomElement",
+          "tagName": "shadow-dom-element",
           "members": [
@@ -39,6 +40,16 @@ {
               ],
-              "description": "applies template content and renders slots"
+              "description": "applies template content and renders slots, called from `slotsInit()`"
             },
             {
               "kind": "method",
+              "name": "fetch",
+              "parameters": [
+                {
+                  "name": "url"
+                }
+              ],
+              "description": "override to load and process URL before returning a HTML string with data within slots."
+            },
+            {
+              "kind": "method",
               "name": "slotsInit",
@@ -53,2 +64,22 @@ "return": {
           ],
+          "events":[],
+          "slots":[],
+          "attributes": [
+              {   "name": "tag",
+                  "description": "tag name of declarative custom element"
+              },
+              {   "name": "srcset",
+                  "description": "id of container with slots"
+              },
+              {   "name": "src",
+                  "description": "url for html with slots"
+              },
+              {   "name": "for",
+                  "description": "id for html template"
+              },
+              {   "name": "code",
+                  "description": "url for html template"
+              }
+          ],
+          "demos":[],
           "superclass": {
@@ -69,2 +100,10 @@ "name": "HTMLElement"
           }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "shadow-dom-element",
+          "declaration": {
+            "name": "ShadowDomElement",
+            "module": "shadow-dom-element.js"
+          }
         }
@@ -71,0 +110,0 @@ ]

package.json

 {
     "name": "shadow-dom-element",
-    "version": "0.0.7",
-    "description": "shadow-dom-element web component to render local and remote template",
+    "version": "0.0.8",
+    "description": "shadow-dom-element is a declarative custom element/web component to render local and remote template",
     "author": {
@@ -33,3 +33,3 @@ "name": "Sasha Firsov",
     "scripts": {
-        "start": "npx @web/dev-server",
+        "start": "npm i @web/dev-server && web-dev-server --node-resolve",
         "test": "echo 'test is implemented in https://github.com/sashafirsov/light-dom-element-test' && exit 0"
@@ -36,0 +36,0 @@ },

README.md

@@ -8,8 +8,5 @@ # shadow-dom-element
 
-* fetch via [fetch() api](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
-* `promise` property resolved when template is applied.
-
 [![git](https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg) GitHub](https://github.com/sashafirsov/shadow-dom-element)
 | Try in [Sandbox][sandbox-url]
-| Live Demo: [shadow-dom-element](https://unpkg.com/shadow-dom-element@0.0.7/index.html)
+| Live Demo: [shadow-dom-element](https://unpkg.com/shadow-dom-element@0.0.8/index.html)
 | [tests project](https://github.com/sashafirsov/light-dom-element-test)
@@ -21,2 +18,10 @@
 
+```html
+<script type="module" src="https://unpkg.com/shadow-dom-element@0.0/shadow-dom-element.js"></script>
+<shadow-dom-element tag="my-component" src="https://unpkg.com/light-dom-element-test@0.0/test/template.html"></shadow-dom-element>
+<my-component>
+    <h3 slot="slot1">heading 😌</h3>
+</my-component>
+```
+
 ## Where to use
@@ -29,3 +34,3 @@ `shadow-dom-element` is simplest web component to render HTML `template` and `slot`.
 as most of "components" could be expressed via template in own file. 
-[There is a live sample](https://unpkg.com/shadow-dom-element@0.0.7/demo/ananke/content/en/index.html) 
+[There is a live sample](https://unpkg.com/shadow-dom-element@0.0.8/demo/ananke/content/en/index.html) 
 of `shadow-dom-element` based templates for Ananke site generator. 
@@ -52,2 +57,5 @@ While it is not a good example of shadow dom css styling,
 ## API
+fetch implemented via [fetch() api](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), can be overridden with 
+any type.
+
 * `promise` resolved when template and slots loaded and rendered
@@ -64,2 +72,3 @@ * `slotsInit()` initiates template and slots reading and rendering, returns `Promise<this>`
 all attributes reflected as component properties
+* `tag` tag name of declarative custom element
 * `srcset` id of container with slots
@@ -90,2 +99,3 @@ * `src` url for html with slots
 ```
+
 # test and demo
@@ -101,3 +111,3 @@ reside in separate repository https://github.com/sashafirsov/ligh-dom-element-test to avoid unnecessary dependency in
 # Typescript
-`import SlottedElement from 'shadow-dom-element'` code has [typings](shadow-dom-element.d.ts) along with JSDoc enabled. 
+`import ShadowDomElement from 'shadow-dom-element'` code has [typings](shadow-dom-element.d.ts) along with JSDoc enabled. 
 
@@ -109,4 +119,4 @@ # dependencies
 [npm-url]:        https://npmjs.org/package/shadow-dom-element
-[coverage-image]: https://unpkg.com/light-dom-element-test@0.0.7/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/light-dom-element-test@0.0.7/coverage/lcov-report/index.html
+[coverage-image]: https://unpkg.com/light-dom-element-test@0.0.8/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/light-dom-element-test@0.0.8/coverage/lcov-report/index.html
 [sandbox-url]:    https://stackblitz.com/github/sashafirsov/shadow-dom-element

shadow-dom-element.d.ts

 /// <reference lib="dom" />
 /**
- * Web Component to populate html slots into template using Shadow DOM.
+ * @summary Web Component to populate html slots into template using Shadow DOM.
+ * Declarative Custom Element when `tag` attribute is presented.
  * Slots content and template could be local in the page or pointed via URL.
+ *
+ * @tagname shadow-dom-element
+ * @attribute {string} tag - custom element tag name
+ * @attribute {string} tag - custom element tag name
+ * @attribute {string} srcset - ID of slots payload, usually a template with slots element
+ * @attribute {string} src - URL to slots payload
+ * @attribute {string} for - ID of template element
+ * @attribute {string} for - URL of template html, no template should be in retrieved file
  */
@@ -6,0 +15,0 @@ export default class ShadowDomElement extends HTMLElement {

shadow-dom-element.js

@@ -1,3 +0,3 @@
-const attr = (el, name)=>el.getAttribute(name);
-
+const attr = (el, name)=>el.getAttribute(name)|| el.sde?.getAttribute(name);
+const TAG = 'shadow-dom-element';
 export default class ShadowDomElement extends HTMLElement
@@ -10,3 +10,23 @@ {
         super();
-        this.promise = this.slotsInit();
+        const tag = attr(this,'tag');
+        if( tag && this.tagName.toLowerCase() === TAG  )
+        {   const sde = this;
+            this.templates = [...this.getElementsByTagName( 'template' )];
+            this.templates.map( t=>t.remove() );
+            customElements.define( tag, class ShadowDomElementDCE extends ShadowDomElement{
+                async slotsInit()
+                {   this.sde = sde;
+                    await sde.promise;
+                    return super.slotsInit();
+                }
+            } );
+            if( this.childElementCount )
+            {   const html = this.outerHTML.replace('<'+TAG, '<'+tag);
+                this.innerHTML='';
+                this.insertAdjacentHTML('afterend',html);
+            }
+        }else
+        {   this.templates = [];
+            this.promise = this.slotsInit();
+        }
     }
@@ -41,3 +61,4 @@ async fetch( url ){ return ( await fetch( url ) ).text() }
         };
-        const embeddedTemplates = [ ...this.getElementsByTagName( 'template' ) ];
+        const embeddedTemplates = [ ...this.getElementsByTagName( 'template' )
+                                  , ...( this.sde ? this.sde.templates : [] ) ];
         await onAttr(
@@ -61,2 +82,3 @@ 'srcset',
             d.childNodes.forEach( n => t.content.append( n ) );
+            this.templates.push(t);
             applyTemplate( t );
@@ -68,2 +90,2 @@ } );
 
-window.customElements.define('shadow-dom-element', ShadowDomElement);
+window.customElements.define(TAG, ShadowDomElement);

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 34 instances 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

1014124

increased by4.89%

Number of package files

327

increased by16.37%

Lines of code

236

increased by43.03%

Number of lines in readme file

115

increased by9.52%

Worsened metrics

Number of medium supply chain risk alerts

242

increased by16.35%

No dependency changes