Styleguide Example

element.coffee

class StyleguideItemElement extends HTMLElement
  createdCallback: ->
    console.log 'here'
    @shadowRoot = @createShadowRoot()
    
    @contentContainer = document.createElement('div')
    content = document.createElement('content')
    content.setAttribute('select', '*')
    
    @contentContainer.appendChild(content)
    @shadowRoot.appendChild(@contentContainer)
    
    pre = document.createElement('pre')
    @codeContainer = document.createElement('code')
    
    pre.appendChild(@codeContainer)
    @shadowRoot.appendChild(pre)
    
    contentTargets = @querySelectorAll('*')
    sources = Array::map.call contentTargets, (el) -> el.outerHTML
    @codeContainer.textContent = sources.join('\n')
    
StyleguideItemElement =
document.registerElement 'styleguide-item', prototype: StyleguideItemElement.prototype

element.jade

styleguide-item
  for color in ['default', 'primary', 'info', 'success', 'warning', 'danger']  
    button.btn(class="btn-#{color}")= color.replace(/^\w/, function(m){ return m.toUpperCase() })