A native web component to dynamically generate web components

[ This description is mirrored from README.md at github.com/LostInBrittany/granite-dynamic-element on 2019-05-10 ]

Published on webcomponents.org

granite-dynamic-element

A native web component to dynamically generate web components

Usage example

<granite-dynamic-element name="h1" slot="Hello my friend!" attr1="passed to child" another-random-attribute="also passed to child">
</granite-dynamic-element>
<granite-dynamic-element name="a" slot="Link to granite-dynamic-element GitHub" href="https://github.com/LostInBrittany/granite-dynamic-element">
</granite-dynamic-element>

Install

Install the component using Bower:

$ bower install LostInBrittany/granite-dynamic-element --save

Or download as ZIP.## Usage

  1. Import Web Components' polyfill (if needed):

    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    
  2. Import Custom Element:

    <link rel="import" href="bower_components/granite-dynamic-element/granite-dynamic-element.html">
    
  3. Start using it!

    <granite-dynamic-element 
        name="a" slot="Link to granite-dynamic-element GitHub" 
        href="https://github.com/LostInBrittany/granite-dynamic-element">
    </granite-dynamic-element>
    

Attributes

Attribute Type Default Description
name String none The child element name (either native or web component)
slot String '' The child element inner HTML

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT License

Install

Link to this version
ImportedReleased 04 July 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save LostInBrittany/granite-dynamic-element"#1.0.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.0

Dependencies

  • polymer#Polymer/polymer#1.9 - 2