shadow-dom-element - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

demo/doc.json

@@ -0,0 +0,0 @@ {

package.json

 {
     "name": "shadow-dom-element",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "shadow-dom-element web component to render local and remote template",
@@ -36,4 +36,2 @@ "author": {
     },
-    "dependencies": {
-    },
     "funding": {
@@ -40,0 +38,0 @@ "type": "patreon",

README.md

@@ -12,3 +12,4 @@ # shadow-dom-element
 [![git](https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg) GitHub](https://github.com/sashafirsov/shadow-dom-element)
-| Demo: [shadow-dom-element](https://unpkg.com/shadow-dom-element@0.0.4/demo/index.html)
+| Try in [Sandbox][sandbox-url]
+| Live Demo: [shadow-dom-element](https://unpkg.com/shadow-dom-element@0.0.5/index.html)
 | [tests project](https://github.com/sashafirsov/light-dom-element-test)
@@ -26,3 +27,8 @@
 You do not need a [static site generator](https://www.cloudflare.com/learning/performance/static-site-generator/)
-as most of "components" could be expressed via template in own file.
+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) 
+of `shadow-dom-element` based templates for Ananke site generator. 
+While it is not a good example of shadow dom css styling, 
+it gives enough for templates embedding and use of such for building the static web site. You could play  with this 
+responsive template in [Sandbox][sandbox-url].   
 
@@ -61,2 +67,8 @@ [File the issue](https://github.com/sashafirsov/shadow-dom-element/issues)
 
+`<slot name=xxx attribute=abc>` 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. 
+It is needed to pass the attribute via slots. For example, link or image URL. It could be used to pass attribute to internal 
+`shadow-dom-element` as within 
+[summary-with-image template](https://github.com/sashafirsov/shadow-dom-element/blob/324d7de33464368c312e0bc6a9d8becc9b4dabf3/demo/ananke/content/en/index.html#L42)
+for image URL.
 
@@ -80,3 +92,4 @@ # test and demo
 [npm-url]:        https://npmjs.org/package/shadow-dom-element
-[coverage-image]: https://unpkg.com/light-dom-element-test@0.0.4/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/light-dom-element-test@0.0.4/coverage/lcov-report/index.html
+[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
+[sandbox-url]:    https://stackblitz.com/github/sashafirsov/shadow-dom-element

shadow-dom-element.js

@@ -15,3 +15,9 @@ export default class ShadowDomElement extends HTMLElement
         // @ts-ignore
-        this.shadowRoot.appendChild( t.content.cloneNode( true ) );
+        const s = this.shadowRoot;
+        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('')) );
         return this;
@@ -18,0 +24,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

855612

increased by581.23%

Lines of code

155

increased by4.03%

Number of lines in readme file

92

increased by16.46%

Worsened metrics

Number of package files

91

decreased by-11.65%

No dependency changes