carbon-copy - Vaadin Add-on Directory

Name: carbon-copy
Availability: InStock
Rating: 3.0 (51 reviews)
Author: bahrus

Copy an HTML template into a DOM node.

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bahrus/carbon-copy)

b-c-c size:

c-c size:

# \ [Full Screen Demo](https://rawgit.com/bahrus/carbon-copy/master/demo/index.html) Note that there are other client-side include web components you may want to compare this one with -- e.g. github's [include-fragment-element](https://github.com/github/include-fragment-element) and [Juicy's juicy-html](https://www.webcomponents.org/element/Juicy/juicy-html) or [xtal-fetch](https://www.webcomponents.org/element/bahrus/xtal-fetch) if carbon-copy doesn't meet your needs. Copy a template inside a DOM node. For basic functionality, use the b-c-c.js (or b-c-c.iife.js), element name: b-c-c. It just clones the source template into the shadowDOM or innerHTML of the element (depending on the value of the noshadow attribute). For more extended functionality, use element c-c, which is defined by file c-c.js. The most important difference is that c-c creates a custom element on the fly. carbon-copy.js is an iife version of (b-)c-c. Syntax: ```html ... do say ``` Note the use of the attribute "copy". If this is present, you can modify the value of "from" dynamically, and it will clone the contents of the referenced template (based on id). If the attribute "from" changes, b-c-c will blow away what was there before, and clone in the new template. Removing the "from" attribute / property will hide the b-c-c element. c-c, on the other hand, will preserve the existing inner (Shadow) DOM, and makes it get hidden via display:none. If the value of "/from" reverts back, that original DOM will be reshown (and the last template hidden). c-c can be used, combined with templ-mount, to provide an alternative to Polymer's iron-pages, with no legacy dependencies. Templates can come from outside any shadow DOM if the value of "from" starts with a slash. If "from" has no slash, the search for the matching template is done within the shadow DOM of the (b-)c-c element. If from starts with "../" then the search is done one level up, etc. By default, b-c-c will copy in the referenced template into a Shadow DOM snippet. However, if you prefer a copy straight into innerHTML, add attribute / property "noshadow." Doing so will, of course, eliminate the slot mechanism from functioning. Hopefully, if template instantiation becomes a thing, that will provide an alternative for this scenario. b-c-c and c-c can also be used in a kind of "Reverse Polish Notation" version of Polymer's dom-if. ## Codeless Web Components Unlike b-c-c, c-c actually generates a custom (web) component on the fly, based on the id of the template. If the template is a simple word, like "mytemplate" the generated custom element will have name c-c-mytemplate. If the id has a dash in it, it will create a custom element with that name (so id's are limited to what is allowed in terms of custom element names). So here are the steps to create a web component using c-c: Step 1. Define a template: ```html ``` Step 2. Register the web component ```html ``` Step 3. Add your web component to the page ```html ``` Step 4. Stare into the abyss. ### Adding string properties The template can specify a list of string properties to add to the automatically generated web component: ```html ``` If the web component's property is set, it will reflect to an attribute with the same name. ### Attaching methods to the generated custom element ```html ``` All attribute changes call onPropsChange if it is defined. ### Adding Object Properties ```html ``` Object properties also observe attribute changes with the same name as the property, and also calls onPropsChange. If you set the attribute value for an object property, it will assume the string is JSON, and will parse it. Changes to object properties fire events with the name "[name of prop]-changed".

Beautiful

Christina Aguilera

Don't look at me

Everyday is so wonderful

Then suddenly

It's hard to breathe

Now and then I get insecure

From all the pain

I'm so ashamed

can't can't me me I am I am

To all your friends you're delirious

So consumed

In all your doom, ooh

Trying hard to fill the emptiness

The pieces gone

Left the puzzle undone

Ain't that the way it is

can't can't you you You are You are

do do

say say

We're the song inside the tune (yeah, oh yeah)

Full of beautiful mistakes

And everywhere we go (and everywhere we go)

The sun will always shine (the sun will always, always, shine)

And tomorrow we might awake

On the other side

won't can't us us We are We are

Oh, oh

Don't you bring me down today

Don't you bring me down, ooh

Today

``` --> ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests ``` $ polymer test ``` Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.