@webqit/oohtml 2.1.42 → 2.1.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -598,7 +598,7 @@ All of OOHTML brings to the platform much of the modern UI development paradigms
|
|
|
598
598
|
</div>
|
|
599
599
|
```
|
|
600
600
|
|
|
601
|
-
**--> Example 3:** The following is a custom element that derives its Shadow DOM from an imported `<tenplate
|
|
601
|
+
**--> Example 3:** The following is a custom element that derives its Shadow DOM from an imported `<tenplate>` element. The idea is to have different Shadow DOM layouts defined and let the "usage" context decide which variant is imported!
|
|
602
602
|
|
|
603
603
|
└ *First, two layout options defined for the Shadow DOM*:
|
|
604
604
|
|
|
@@ -620,7 +620,7 @@ All of OOHTML brings to the platform much of the modern UI development paradigms
|
|
|
620
620
|
</template>
|
|
621
621
|
```
|
|
622
622
|
|
|
623
|
-
└ *Next, the Shadow DOM creation that
|
|
623
|
+
└ *Next, the Shadow DOM creation that imports its layout from context*:
|
|
624
624
|
|
|
625
625
|
```js
|
|
626
626
|
customElements.define('magic-button', class extends HTMLElement {
|
|
@@ -647,14 +647,16 @@ customElements.define('magic-button', class extends HTMLElement {
|
|
|
647
647
|
</div>
|
|
648
648
|
```
|
|
649
649
|
|
|
650
|
-
**--> Example 4:** The following is a "
|
|
650
|
+
**--> Example 4:** The following is a "component" that derives its list items and other reusable snippets from "scoped" `<tenplate>` elements. The idea is to have a "self-contained" component that's all markup-based, not class-based!
|
|
651
651
|
|
|
652
652
|
└ *A list component with scoped module system*:
|
|
653
653
|
|
|
654
654
|
```html
|
|
655
655
|
<div namespace>
|
|
656
656
|
|
|
657
|
+
<import ref="other"></import>
|
|
657
658
|
<ul id="list"></ul>
|
|
659
|
+
<import ref="other"></import>
|
|
658
660
|
|
|
659
661
|
<template def="item" scoped>
|
|
660
662
|
<li>
|
|
@@ -662,6 +664,10 @@ customElements.define('magic-button', class extends HTMLElement {
|
|
|
662
664
|
</li>
|
|
663
665
|
</template>
|
|
664
666
|
|
|
667
|
+
<template def="other" scoped>
|
|
668
|
+
<button>Call to Action >><button>
|
|
669
|
+
</template>
|
|
670
|
+
|
|
665
671
|
<script scoped>
|
|
666
672
|
this.import('item', template => {
|
|
667
673
|
const clone = template.content.cloneNode(true);
|
|
@@ -704,7 +710,7 @@ If you must load the script "async", one little trade-off has to be made for `<s
|
|
|
704
710
|
</body>
|
|
705
711
|
```
|
|
706
712
|
|
|
707
|
-
The custom MIME type strategy also comes in as a "fix" for
|
|
713
|
+
The custom MIME type strategy also comes in as a "fix" for when in a browser or other runtime where the polyfill is not able to intercept `<script scoped>` and `<script contract>` elements ahead of the runtime - e.g. where...
|
|
708
714
|
|
|
709
715
|
```html
|
|
710
716
|
<body>
|
|
@@ -744,7 +750,7 @@ Also, if you'll be going ahead to build a real world app to see OOHTML in action
|
|
|
744
750
|
Implementation Notes
|
|
745
751
|
</summary>
|
|
746
752
|
|
|
747
|
-
Here are
|
|
753
|
+
Here are some performance-specific notes for this polyfill:
|
|
748
754
|
|
|
749
755
|
+ By default, the Contract Functions compiler (43.15KB min+gzipped | 157KB min) is excluded from the polyfill build and fetched separately on demand - on the first encounter with a Contract Script. This is loaded into a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) and all compilations are able to happen off the main thread! This ensures near-zero cost to your application loading and runtime performance!
|
|
750
756
|
|