Hey there!
Intro & problem
One initial problem I noticed is that web components are not object oriented. Is there any way to unite two proposals: oohtml and web-components into something unique, as “oohtmlwb” ?
Proposed solution
OOHTML offers a set of five features that make common UI development paradigms possible as native web platform features. These features may be used individually or together for some great UI-authoring capabilites.
An important resource is “HTML Modules” are a templating feature that lets us write reusable HTML markup using the “module”, “export” and “import” paradigm. This feature establishes the standard <template> element as the foundation of a module infrastructure for HTML and introduces new attributes, properties and events that together closes the loop. A module is a regular <template> element with a name attribute - the module ID - and its contents are simply the exports. For example, with oohtml you can make this:
<head>
<template name="module-remote" src="/bundle.html"></template>
</head>
However, there is web-components that have something call ‘custom elements’ - a set of JavaScript APIs that allow you to define new custom HTML tags or improve existing ones. For example, with web-components you can make this:
filename: template.js
// oohtml & web-component(custom elements)
class Template extends HTMLElement {
constructor(name, src) {
super();
this.name = name;
this.src= src;
}
customElements.define('template', Template); // output: <template name="module-remote" src="/bundle.oohtmlwb"></template>
Implementation
The proposal I write here would be oohtml in web-components. That way, it would be even more componentized, modular, functional oohtml with web-components. The advantage of this declarative programming method: oohtml and web-component is that you can store website templates on a cdn network, and so anyone programming on another website can reuse that same code base, in a componentized, functional and modular way. For those who like programming in a language like php, this code would be like an “include”, where you add part of a separate file. With oohtml/web-components or oohtmlwb here is an overview that you can make:
index.html
<!DOCTYPE html>
<html>
<head>
<title>oohtmlwb</title>
<head>
<!-- Imports oohtmlwb with cdn.library-oohtmlwb external element -->
<script src="https://demo.com/ajax/libs/template.min.js"></script>
</head>
<body>
<!-- Runs custom element from cdn.styles-oohtmlwb, cdn.library-oohtmlwb--->
<script>
const IncludeCustomTemplate = CustomTemplate("module-remote", "/bundle.oohtmlwb");
// output: <template name="module-remote" src="/bundle.oohtmlwb"></template>
// oohtml & web-component(custom elements)
class CustomHeadTemplate extends HTMLElement {
constructor() {
super();
this.innerHTML = IncludeCustomTemplate;
// add input: <template name="module-remote" src="/bundle.oohtmlwb"></template>
}
customElements.define('head', CustomHeadTemplate);
// add output: <head> <template name="module-remote" src="/bundle.oohtmlwb"></template> </head>
</script>
<head>
<!--- outpub: <template name="module-remote" src="/bundle.oohtmlwb"></template> --->
</head>
</body>
</html>