Web Information Services by Q & Janko Durdik
Docu - Proprietary HTML Document Modules Includes
11:14 25.09.2022 GMT/UTC+02:00 (CEST)
The completion of proprietary inclusion of HTML modules is ongoing work.
Include(s) Property
These HTML module includes are handled by the ES6+ JavaScript external script module (and hence deferred) dj-include-html.mjs. It lets them inherit parent element styles by design, apart from the async attribute it's configurable with regard to the attribute w3-include-html only and the includes with the global scope of their possibly non-module scripts are not encapsulated.
TODO (djApplGames.htm pre-XHR and) tic-tac-toe.mjs post-XHR TEMORARILY makes use of the element id="log-w3-include-html" when deferred initializing its top scope bound to a deferred loaded subtree of the DOM, circumvents the aforementioned I/F and this is to be removed.
TODO id="common-redundant-part" TEMORARILY is helping to render a message from the removal of the element id="log-w3-include-html" on the game restart, circumvents the aforementioned I/F and is to be removed.
TODO import {g_initModule} from ..."/tic-tac-toe.mjs";
HTML document modules can be included anywhere into a HTML document page, inclusive into each other.
Setting Up the Point(s) of Include(s)
/*All external scripts belonging to a directly included HTML module are to be included from at least one corresponding HTML module inclusion element or from the head of the HTML page. All external scripts belonging to an indirectly included HTML module are to be included from at least one corresponding directly included HTML module inclusion element or from the head of the HTML page.*/
fnktnxs directly used with elements in the included-module-name.htm window-level global by explicitly assigning them to a window property, e.g. window.fnktnx = fnktnx;, to make them reachable from (defined in) (at least) any HTML document, including included-module-name.htm, and rename the extension of the script included-module-name.js to mjs for clarity (this can involve adding the MIME type extension .mjs in the web server).
<div id="w3-include-html" w3-include-html="[path]/included-module-name.htm"></div> where you want the included-module-name to have included<script async
type="module"
src="[path]/dj-include-html.mjs">/*This is to be included here at the end of the HTML header when HTML document modules are included in the page*/</script> near the end of its head tag
The inclusion procedure automatically starts in the top scope of dj-include-html.mjs.
NB Currently only the first element <div w3-include-html="[path]/included-module-name.htm"></div> encountered in DOM by document.getElementsByTagName("*") is included.
Initializing Include(s)
The HTML modules init is science in itself. TODO Remove discarded module registration. The same HTML module needing deffered (global) variables initialization in its ES6+ JavaScript script modules is allowed to be included, with embedded script inclusion or without, once and only once from a uniquely, including the filename extension, named file only. Different versions of HTML modules can be included e.g. as files with (partly) different extensions or (partly) different names. They must consider the resulting page non-shadow DOM as a whole. This currenly isn't verified prior to the inclusion.
export function g_startGame(p_) { ... }export let config = { };Take note of the at least static imports at least from named exports issue. Its description may currently be removed from rendering.