In my previous post I described how to send data in form of attributes to a web component. Since this mechanism is only applicable for simple values, there also is a separate mechanism for inserting complex values.
Let me explain the goal first. If I have a web component which consists of the following internal structure.
To use this component, you have to insert it into the DOM and it will render a visual representation. If I now want to fill those empty placeholders with content I have to use HTML elements within the component.
With this definition, the browser no longer knows where to place the header line or the content line within my control.
To tackle that issue, the spec proposes the use of “slot” elements, which will represent placeholders which can later be filled by content.
Slot elements can be placed anywhere within the component. It is preferred that those slots are named (if only one slot exists, the name can be omitted).
This is what a web component with slots would look like.
To use those predefined slots, the attached element has to name the slot it wants to be placed in.
Now the control gets rendered with the header and content part at the right places.
- embed a github commit log into markdown
- add jar to the classpath at runtime in jjs (the hacky way)
- doing objects in jjs
- read the content of a file in one line in jjs
- print something to the console in jjs
- using jjs under osx
- tracking virtual links with google analytics
- cloud-the-web - my new web project
- installing GLUEscript on debian squeeze 64bit