search

socketsupply / tonic

A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free.
http://tonicframework.dev
MIT License
867 stars 24 forks source link

Slots #75

Open cekvenich2 opened 3 years ago

cekvenich2 commented 3 years ago

I like it, very nice an light.

Is there an example of using slots from a page?

Raynos commented 3 years ago

Can you explain more what the slots feature is ? Is that a feature from a different framework. Do you have an pseudo code example of what you would like to do ?

Are you talking about the HTML5 <slot> tag or the slot / v-slot feature in vuejs ?

cekvenich2 commented 3 years ago
is a standard use by all web component frameworks: https://developers.google.com/web/fundamentals/web-components/customelements
heapwolf commented 3 years ago

I never added slots because you don't need them. it's a concept that no one needs to learn with tonic if they understand javascript string literals.

render () {
  const slotted = 'hello, world'

  return this.html`
    <p> ${ slotted } </p>
  `
}

More succinctly, <slot> === ${slot}. the slotted variable can contain almost anything, not just primitive values, for example more html...

const slotted = this.html`
  <another-component parent=${this}></another-component>
`