https://github.com/googlearchive/template-composition

A Polymer behavior for composing super and subclass templates.
https://github.com/googlearchive/template-composition

Last synced: 3 months ago
JSON representation

A Polymer behavior for composing super and subclass templates.

• Host: GitHub
• URL: https://github.com/googlearchive/template-composition
• Owner: googlearchive
• Archived: true
• Created: 2016-02-11T03:02:08.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-11T19:29:16.000Z (almost 9 years ago)
• Last Synced: 2024-07-29T04:09:26.183Z (4 months ago)
• Language: HTML
• Size: 6.84 KB
• Stars: 17
• Watchers: 11
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
template-composition

====================

This is a Polymer behavior to compose superclass and subclass templates.

It's available at `Polymer.TemplateComposition`. The composition mechanism

is inspired by [stampino](https://github.com/justinfagnani/stampino). It allows you to (1) compose a superclass template into a subclass template, and (2) compose sub-parts of the subclass template called `blocks` into a composed superclass template.

Here's a quick [example](http://jsbin.com/fezohu/edit?html,output). It shows placing a super-class template somewhere in a subclass. You indicate the insertion spot by creating a special template block called ``.

``` html

  

    I am x-base!

  

  

    Polymer({

      is: 'x-base'

    });

  

  

    

    I am x-extend!

  

  

    Polymer({

      is: 'x-extend',

      extends: 'x-base'

    });

  

```

Here's another [example](http://jsbin.com/vodanu/edit?html,output). It shows composing subclass `blocks` into a superclass template. Do this by matching block names between the super and subclass. The subclass blocks that should be used to 'fill in' the superclass should be nested in a 'super block'.

``` html

  

  

    


      
Who am I?

      I am x-base!

    

  

  

    Polymer({

      is: 'x-base',

      behaviors: [Polymer.TemplateComposition]

    });

  


  

    

      I am x-extend!      

    

  

  

    Polymer({

      is: 'x-extend',

      extends: 'x-base',

      behaviors: [Polymer.TemplateComposition]

    });

  

```

In the above example, the composed dom for `x-base` and `x-extend` will look like this:

``` html



  
Who am I?

  I am x-base!





  
Who am I?

  I am x-extend!



```


Here's a [slightly more complicated example](http://jsbin.com/bireraf/edit?html,output) that shows extending an already extended template. 

Notes:

* a superclass needs to include the `Polymer.TemplateComposition` behavior if it defines overridable blocks.

* a subclass that composes a superclass template will automatically pre-pend the superclass styles.

* including the `super` template is currently all or nothing. You cannot include only certain blocks in a super template. In addition a subclass cannot supply blocks to fill in a template from a super's superclass.

* customization: composition can be customized by overriding `_processTemplate(template)` and returning the fully composed template; styling can be customized by overriding `_collectStyles` and returning an array of style elements to be used to style the element.