Manual

[frank-dspeed]

// This Methods are not designed to get called via () as they assume the existence of the .raw property on the first arrgument

html`` 
renderString``

After that the methods are in general save to get called directly

renderLiteral

theRunInContext Stuff is Tricky but Nice

Write Components as Class or Function

Depending on your usecase it is most time the best to code a Component as a single Function that returns a string.
when you want to make it interactive in the browser you have 3 choices

• you can register additional customElement.define definitions
• you can on render apply customElement Logic like register events or streams
• you can insert a <script> tag that references or selectes the right tag and applys the customElement logic.

when you go for the class method you can extend the ifHtmlElement and always depend on the render() method of it this way you can easy render it inside nodejs and the browser as the connectedCallback gets only executed in the browser the render function will only return the template.

Design

The pseudo encapsulation via strange property of the component

<style>
  .blue-button[_ngcontent-c1] {
          background:blue;
   }
</style>
<blue-button _nghost-c1="" _ngcontent-c0="">

if your using the class method you maybe simply want to apply shadowroot in the connected callback and use a <style> tag inside the template.

Modlet Structure?!?

You can split your files into .css, .mjs, html but we suggest that you create .html and mjs only. When you need to switch large application styles you can use css files but now days this is not the case anymore.

[frank-dspeed]

https://github.com/stealify/estscm