app.html

<plugin-section></plugin-section>

<script>

const Extensible = require('extensible')
const Render = require('extensible').Render // this will be global for extensions, 
// if we don't do this, the extension creators will use Render using Extensible.Render() instead of Render()
  
const plugin = Extensible.load({
  context: 'plugin',
  container: 'plugin-section'
})

/*
context is the name of the const where the plugin object will be stored

context: 'plugin' needs to be the same 'const plugin' name

so we can access the extensions functions by that path: plugin.extension_id

example inside the extension:
 onclick="${extension.id}.click()" is onclick="plugin.buttonExtensible.click()"

The next code (button.js) will clarify it
/*
</script>

button.js

module.exports = extension => {
  console.log(extension.id) // plugin.buttonExtensible
  /* 
    the path to access returned functions for late access, 
    in this case is the 'click' function when the user triggers onclick
  */
  
  Render()
    .component(`<button onclick="${extension.id}.click()">This is a button!</button>`)
    .into(extension.container)
  
  return {
    click: () => console.log('buttonPlugin was clicked!')
  }
}