joicomponents
Version:
Design patterns to build native web components
141 lines (133 loc) • 6.93 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web component design patterns</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script> /** Polyfill code **/
//Setup: declare the function for loading script sync
function loadScriptSync(url, onAsyncLoadAsString) {
var newScript = document.createElement('script');
newScript.src = url;
onAsyncLoadAsString && newScript.setAttribute("onload", onAsyncLoadAsString);
document.write(newScript.outerHTML);
}
//Setup: add methods for pausing customElements polyfill
window.WebComponents = window.WebComponents || {};
window.WebComponents.stopCEPolyfill = function () {
if (window.customElements && customElements.polyfillWrapFlushCallback) {
customElements.polyfillWrapFlushCallback(function () {
});
}
};
window.WebComponents.startCEPolyfill = function () {
if (window.customElements && customElements.polyfillWrapFlushCallback) {
customElements.polyfillWrapFlushCallback(function (flush) {
flush();
});
customElements.upgrade(document);
}
};
//step 1: feature detection
var CE = window.customElements;
var SD = 'attachShadow' in Element.prototype && 'getRootNode' in Element.prototype;
var ES6 = window.Promise && Array.from && window.URL && window.Symbol;
var TE = !(function () {
// no real <template> because no `content` property (IE and older browsers)
var t = document.createElement('template');
if (!('content' in t)) {
return true;
}
// broken doc fragment (older Edge)
if (!(t.content.cloneNode() instanceof DocumentFragment)) {
return true;
}
// broken <template> cloning (Edge up to at least version 17)
var t2 = document.createElement('template');
t2.content.appendChild(document.createElement('div'));
t.content.appendChild(t2);
var clone = t.cloneNode(true);
return clone.content.childNodes.length === 0 ||
clone.content.firstChild.content.childNodes.length === 0;
})();
//step 2: load polyfill async based on feature detection
const base = "https://rawgit.com/webcomponents/webcomponentsjs/master/bundles/";
if (CE && SD && TE && ES6) { //[1]
} else if (!CE && SD && TE && ES6) {
loadScriptSync(base + "webcomponents-ce.js", "WebComponents.stopCEPolyfill();");
} else if (!CE && !SD && TE && ES6) {
loadScriptSync(base + "webcomponents-sd-ce.js", "WebComponents.stopCEPolyfill();");
} else { /*if (!CE && !SD && !TE && !ES6) {*/
loadScriptSync(base + "webcomponents-sd-ce-pf.js",
"HTMLTemplateElement.bootstrap(document); WebComponents.stopCEPolyfill();");
}
//step 3: restart the customElements polyfill on DOMContentLoaded
window.addEventListener("DOMContentLoaded", function () {
WebComponents.startCEPolyfill();
});
</script>
<script type="module">
import {MarkDown} from "./MarkDown.js";
import {WcBook, WcChapter} from "./WcBookChapter.js";
import {CodeExample} from "./CodeExample.js";
customElements.define("mark-down", MarkDown);
customElements.define("wc-book", WcBook);
customElements.define("wc-chapter", WcChapter);
customElements.define("code-example", CodeExample);
</script>
</head>
<body>
<wc-book>
<h1>wc design patterns</h1>
<wc-chapter title="Web components basics">
<wc-chapter title="Pattern: CreateElement">
</wc-chapter>
<wc-chapter title="Pattern: Create a shadowDom">Pattern2_shadowDom</wc-chapter>
<wc-chapter title="Pattern: attributeChangedCallback">Pattern6_AttributeReaction</wc-chapter>
</wc-chapter>
<wc-chapter title="Isolated Functional mixins and life cycle hooks">
<wc-chapter title="Discussion_IsolatedFunctionalMixin">Discussion_IsolatedFunctionalMixin</wc-chapter>
<wc-chapter title="Mixin1_SlotchangeMixin">Mixin1_SlotchangeMixin</wc-chapter>
<wc-chapter title="Mixin2_ResizeMixin">Mixin2_ResizeMixin</wc-chapter>
<wc-chapter title="Mixin4_FirstConnectedMixin">Mixin4_FirstConnectedMixin</wc-chapter>
<wc-chapter title="Mixin5_EnterViewMixin">Mixin5_EnterViewMixin</wc-chapter>
<wc-chapter title="Pattern1_ReactiveMethod">Pattern1_ReactiveMethod</wc-chapter>
<wc-chapter title="Pattern2_FunctionalMixin">Pattern2_FunctionalMixin</wc-chapter>
</wc-chapter>
<wc-chapter title="ComposedEvents and Gestures in JS">
<wc-chapter title="Mixin1_DragFlingGesture.md">Mixin1_DragFlingGesture.md</wc-chapter>
<wc-chapter title="Mixin2_FlingEventMixin.md">Mixin2_FlingEventMixin.md</wc-chapter>
<wc-chapter title="Mixin3_PinchGesture.md">Mixin3_PinchGesture.md</wc-chapter>
<wc-chapter title="Pattern1_ComposedEvents.md">Pattern1_ComposedEvents.md</wc-chapter>
<wc-chapter title="Pattern2_InvadeAndRetreat.md">Pattern2_InvadeAndRetreat.md</wc-chapter>
<wc-chapter title="Problem_conflicting_gestures.md">Problem_conflicting_gestures.md</wc-chapter>
</wc-chapter>
<wc-chapter title="Patterns for HTML Composition">
<wc-chapter title="Intro_HTML-Lists.md">Intro_HTML-Lists.md</wc-chapter>
<wc-chapter title="Pattern1_FosterParentChild.md">Pattern1_FosterParentChild.md</wc-chapter>
<wc-chapter title="Pattern2_HelicopterParentChild.md">Pattern2_HelicopterParentChild.md</wc-chapter>
<wc-chapter title="Pattern3_CulDeSacElements.md">Pattern3_CulDeSacElements.md</wc-chapter>
<wc-chapter title="Pattern4_KeepItLight.md">Pattern4_KeepItLight.md</wc-chapter>
</wc-chapter>
<wc-chapter title="Style">
<wc-chapter title="Discussion_mediaqueries_pseudoelements.md">Discussion_mediaqueries_pseudoelements.md
</wc-chapter>
<wc-chapter title="Intro_Style_in_web_comps.md">Intro_Style_in_web_comps.md</wc-chapter>
<wc-chapter title="Pattern1_this_style_rocks.md">Pattern1_this_style_rocks.md</wc-chapter>
<wc-chapter title="Pattern2_host_with_style.md">Pattern2_host_with_style.md</wc-chapter>
<wc-chapter title="Pattern3_css_variables.md">Pattern3_css_variables.md</wc-chapter>
<wc-chapter title="Pattern4_css_pseudo_elements.md">Pattern4_css_pseudo_elements.md</wc-chapter>
<wc-chapter title="Pattern5_ResponsiveLayout.md">Pattern5_ResponsiveLayout.md</wc-chapter>
</wc-chapter>
<wc-chapter title="How to polyfill web components?">
<wc-chapter title="Intro_Polyfills.md">Intro_Polyfills.md</wc-chapter>
<wc-chapter title="Pattern1_FeatureDetection.md">Pattern1_FeatureDetection.md</wc-chapter>
<wc-chapter title="Pattern2_LoadScript.md">Pattern2_LoadScript.md</wc-chapter>
<wc-chapter title="Pattern3_FeatureDetectAndPolyfill.md">Pattern3_FeatureDetectAndPolyfill.md</wc-chapter>
<wc-chapter title="Pattern4_BatchCustomElementUpgrades.md">Pattern4_BatchCustomElementUpgrades.md</wc-chapter>
<wc-chapter title="Pattern5_QueAndRecallFunctions.md">Pattern5_QueAndRecallFunctions.md</wc-chapter>
<wc-chapter title="Pattern6_FeatureDetectAndPolyfillAsync.md">Pattern6_FeatureDetectAndPolyfillAsync.md</wc-chapter>
</wc-chapter>
</wc-book>
</body>
</html>