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 variables 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.*/

  1. write and verify your HTML document included-module-name.htm you want to have included
  2. if the corresponding ES JavaScript script included-module-name.js, if any, was not a module, make all JavaScript functions 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).
  3. make sure the corresponding ES JavaScript script module included-module-name.js (included-module-name.mjs), if any, is included near the end of the <head> tag, if any, or near the end of the <body> tag, if any, in the included-module-name.htm or near the end of the file included-module-name.htm as the foremost script inclusion (relative order of scripts is maintained: scripts that go first in the document, execute first)
  4. in an HTML document of your choice
    1. place <div id="w3-include-html" w3-include-html="[path]/included-module-name.htm"></div> where you want the included-module-name to have included
    2. place <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.

Take note of the at least static imports at least from named exports issue. Its description may currently be removed from rendering.