shadow-dom-element - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

 {
     "name": "shadow-dom-element",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "shadow-dom-element web component to render local and remote template",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -13,3 +13,3 @@ # shadow-dom-element
 | Try in [Sandbox][sandbox-url]
-| Live Demo: [shadow-dom-element](https://unpkg.com/shadow-dom-element@0.0.5/index.html)
+| Live Demo: [shadow-dom-element](https://unpkg.com/shadow-dom-element@0.0.6/index.html)
 | [tests project](https://github.com/sashafirsov/light-dom-element-test)
@@ -28,3 +28,3 @@
 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.5/demo/ananke/content/en/index.html) 
+[There is a live sample](https://unpkg.com/shadow-dom-element@0.0.6/demo/ananke/content/en/index.html) 
 of `shadow-dom-element` based templates for Ananke site generator. 
@@ -67,3 +67,4 @@ While it is not a good example of shadow dom css styling,
 
-`<slot name=xxx attribute=abc>` is a special case of `slot` use within template: it would set the `abc` attribute of 
+#### From slot to attribute
+`<slot name=xxx attribute=abc for=id-in-shadow-dom>` is a special case of `slot` use within template: it would set the `abc` attribute of 
 parent node to value taken either from `href`, `src`, or innerText of passed element with given name. 
@@ -75,2 +76,14 @@ It is needed to pass the attribute via slots. For example, link or image URL. It could be used to pass attribute to internal
 
+* `slot attribute=abc` defines attribute which would be populated from slot `href`, `src`, or `innerText`
+* `slot for=in-shadow-id` for slot with `attribute` defines the element where attribute would be applied. When omitted,
+the attribute of container element where slot is located in template would be set:
+```html
+        <shadow-dom-element>
+            <template>
+                <img  id="image-2" alt="source from slot" />
+                <slot name="image-src" attribute="src" for="image-2" hidden></slot>
+            </template>
+            <link slot="image-src" href="doc.png" />
+        </shadow-dom-element>
+```
 # test and demo
@@ -93,4 +106,4 @@ reside in separate repository https://github.com/sashafirsov/ligh-dom-element-test to avoid unnecessary dependency in
 [npm-url]:        https://npmjs.org/package/shadow-dom-element
-[coverage-image]: https://unpkg.com/light-dom-element-test@0.0.5/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/light-dom-element-test@0.0.5/coverage/lcov-report/index.html
+[coverage-image]: https://unpkg.com/light-dom-element-test@0.0.6/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/light-dom-element-test@0.0.6/coverage/lcov-report/index.html
 [sandbox-url]:    https://stackblitz.com/github/sashafirsov/shadow-dom-element

shadow-dom-element.js

@@ -0,1 +1,3 @@
+const attr = (el, name)=>el.getAttribute(name);
+
 export default class ShadowDomElement extends HTMLElement
@@ -17,7 +19,11 @@ {
         s.appendChild( t.content.cloneNode( true ) );
-        s.querySelectorAll('slot[attribute]').forEach(
-            a => a.parentElement.setAttribute(a.getAttribute('attribute')
-                ,   a.assignedElements().map( l=>l.getAttribute('href')
-                                             ||  l.getAttribute('src')
-                                             ||  l.innerText).join('')) );
+        s.querySelectorAll('slot[attribute]').forEach( a =>
+        {   let f = attr(a,'for')
+            ,   s = f ? a.getRootNode().querySelector('#'+f) : a.parentElement;
+
+            s.setAttribute( attr( a, 'attribute' )
+                ,   a.assignedElements().map( l=>attr( l, 'href')
+                                                 ||  attr( l, 'src')
+                                                 ||  l.innerText).join(''))
+        });
         return this;
@@ -29,5 +35,5 @@ }
         const getText = async url => this.fetch( url );
-        const onAttr = async( attr, cb ) =>
+        const onAttr = async( att, cb ) =>
         {
-            await ( async a => ( a ? cb( a ) : 0 ) )( this.getAttribute( attr ) );
+            await ( async a => ( a ? cb( a ) : 0 ) )( attr(this, att ) );
         };
@@ -34,0 +40,0 @@ const embeddedTemplates = [ ...this.getElementsByTagName( 'template' ) ];

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 16 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

872669

increased by1.99%

Number of package files

110

increased by20.88%

Lines of code

159

increased by2.58%

Number of lines in readme file

105

increased by14.13%

Worsened metrics

Number of medium supply chain risk alerts

47

increased by51.61%

No dependency changes