deploy cloud run service

Getting Started

to get web components working include the component library

after that any elements with a [component] attribute will be treated as a web component module

the component.js library exposes a mod object, which holds as its keys the component modules, the key is either the element nodename, or its id, the id can be used when the page contains multiple of the same component

var editor = mod['web-editor']; var editor2 = mod.test;

view the full list of components
html component list

view the component.js library documentation and api
component library

to me a component / module will have a standard lifecycle that is

  • initmod, this is where local depencies are passed to the component, they fundamentally should not be relying on global state to receive their local depencies
  • init, this is where the component first get executed, its an asynchronous function that allows the component to check that it has everything it needs to run, including access to the network to load resources it may need
  • initdom, this is where the component is able to set up its ui, internally build the references it needs to run effeiciently in code

components should also be effectively namespaced so they are free to load any other components that they may need without having to worry that there will ever be a clash

the component library just needs to be included as a script tag, it exposes a global property mod, it runs on window.onload, it has a fundatmental loading stack that allows init runs to be delayed until the loading stack is complete



i demonstrate here a simple setup that loads a log-mod element whos function is to log toaster style messages in a webpage

the common elements to this setup are the inclusion of the component script, the initialisation ( init ) function and the initdom

this is the code for the log-mod component

i include here a standard example of web components, which i feel went some way as to introducing the ability to include complex functionality into web pages, i feel however it fell short on a number of issues i have solved with my component.js library, these are
  • elements were scoped to the global namespace, always a problem when functionality gets ever more complex its only a matter of time before clashes occur
  • methods and properties associated with the component were added to the host node of the element, again thats ok for simple components, but when components get ever more complex its going to be a problem
class newElement extends HTMLElement { constructor(){ super(); var root = this; }//constructor connectedCallback(){} disconnectedCallback(){} static get observedAttributes(){} attributeChangedCallback(name,oldValue,newValue){} adoptedCallback(){} render(){} // A getter/setter for a disabled property. get disabled(){} set disabled(){} // A getter/setter for an open property. get open(){} set open(){} }//class