A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

[Proposal] oohtmlwb(oohtml/web-components)


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:

    <template name="module-remote" src="/bundle.html"></template>

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) {
    this.name = name;
    this.src= src;

customElements.define('template', Template);  // output: <template name="module-remote" src="/bundle.oohtmlwb"></template>


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:

<!DOCTYPE html>
<!-- Imports oohtmlwb with cdn.library-oohtmlwb external element -->
<script src="https://demo.com/ajax/libs/template.min.js"></script>
 <!-- Runs custom element from cdn.styles-oohtmlwb, cdn.library-oohtmlwb--->
    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() {
       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>
     <!--- outpub: <template name="module-remote" src="/bundle.oohtmlwb"></template> --->