Directory

← Back

carbon-copy

Copy an HTML template into a DOM node.

Author

Rating

51

Popularity

<100

Published on webcomponents.org

b-c-c size:

c-c size:

<carbon-copy>

Full Screen Demo

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 and Juicy's juicy-html or 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:

<template id="no-matter">No matter what we
    <slot name="verb1"></slot> (no matter what we <slot name="verb2"></slot>)
</template>
...
<b-c-c copy from="/no-matter">
    <span slot="verb1">
        do
    </span>
    <span slot="verb2">
        say
    </span>
</b-c-c>

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:

<template id="hello-world">
    Hello, world
</template>

Step 2. Register the web component

<c-c from="/hello-world"></c-c>

Step 3. Add your web component to the page

<body>
    <hello-world></hello-world>
</body>

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:

<template id="pow" data-str-props="name,rank,serial_number">
    <div>
        <slot name="subjectIs"></slot> 
    </div>
</template>

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

      <script nomodule data-methods="true">
        ({
          fn: function(){
            console.log(this);
            return this;
          },
          onPropsChange: function(name, oldVal, newVal){
              ...
          }
        })
      </script>
      <template id="beautiful" data-str-props="a,b,c">
        <div>
          <slot name="subjectIs"></slot> beautiful</div>
      </template>

All attribute changes call onPropsChange if it is defined.

Adding Object Properties

<template id="beautiful" data-obj-props="d,e">
    <div>
        <slot name="subjectIs"></slot> beautiful
    </div>
</template>

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".

    <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <!-- End Polyfills -->

    <script type="module" src="https://unpkg.com/carbon-copy@0.1.35/carbon-copy.js"></script>
    <style>
        div {
          background-color:cornsilk;
        }
      </style>
    
  <h3><a href="https://www.youtube.com/watch?v=eAfyFTzZDMM" target="_blank">Beautiful</a></h3>
  <h4>Christina Aguilera</h4>
  <template id="no-matter">
    <style>
      :host{
        background-color:pink;
      }
      ::slotted(*){
        background-color:mediumspringgreen;
      }
    </style>
    No matter what we <slot name="verb1"></slot> (no matter what we <slot name="verb2"></slot>)
  </template>
  <template id="beautiful">
    <style>
      div{
        background-color:burlywood;
      }
      ::slotted(*){
        color:orchid;
      }
    </style>
    <div>
      <slot name="subjectIs"></slot> beautiful
    </div>
  </template>
  <template id="down">
    <style>
      div{
        background-color:olivedrab;
      }
    </style>
    <div>So don't you bring me down today</div>
  </template>
  <template id="chorus">
      <style>
          div {
            background-color:paleturquoise;
          }
        </style>
    <b-c-c copy from="/beautiful">
      <span slot="subjectIs">
        <slot name="subjectIs1"></slot>
      </span>
    </b-c-c>
    <div>No matter what they say</div>
    <div prop-pronoun>Words
      <slot name="verb1"></slot> bring
      <slot name="pronoun1"></slot> down</div>
    <div>Oh no</div>
    <b-c-c copy from="/beautiful">
      <span slot="subjectIs">
        <slot name="subjectIs2"></slot>
      </span>
    </b-c-c>
    <div>In every single way</div>
    <div prop-pronoun>Yes words
      <slot name="verb2"></slot> bring
      <slot name="pronoun2"></slot> down</div>
    <div>Oh no</div>
    <b-c-c copy from="/down"></b-c-c>
  </template>





      <p>Don't look at me</p>
      <p>
        <div>Everyday is so wonderful</div>
        <div>Then suddenly</div>
        <div>It's hard to breathe</div>
        <div>Now and then I get insecure</div>
        <div>From all the pain</div>
        <div>I'm so ashamed</div>
      </p>
      <p>
        <b-c-c copy from="/chorus">

          <span slot="verb1">can't</span>
          <span slot="verb2">can't</span>
          <span slot="pronoun1">me</span>
          <span slot="pronoun2">me</span>
          <span slot="subjectIs1">I am</span>
          <span slot="subjectIs2">I am</span>
        </b-c-c>
      </p>
      <p>

        <div>To all your friends you're delirious</div>
        <div>So consumed</div>
        <div>In all your doom, ooh</div>
        <div>Trying hard to fill the emptiness</div>
        <div>The pieces gone</div>
        <div>Left the puzzle undone</div>
        <div>Ain't that the way it is</div>
      </p>
      <p>
        <b-c-c copy from="/chorus">
          <span slot="verb1">can't</span>
          <span slot="verb2">can't</span>
          <span slot="pronoun1">you</span>
          <span slot="pronoun2">you</span>
          <span slot="subjectIs1">You are</span>
          <span slot="subjectIs2">You are</span>
        </b-c-c>
      </p>
      <br>
      <b-c-c copy from="/no-matter">
        <span slot="verb1">do</span>
        <span slot="verb2">do</span>
      </b-c-c>
      <br>
      <b-c-c copy from="/no-matter">
        <span slot="verb1">say</span>
        <span slot="verb2">say</span>
      </b-c-c>
      <div>We're the song inside the tune (yeah, oh yeah)</div>
      <div>Full of beautiful mistakes</div>
      <p>
        <div>And everywhere we go (and everywhere we go)</div>
        <div>The sun will always shine (the sun will always, always, shine)</div>
        <div>And tomorrow we might awake</div>
        <div>On the other side</div>
      </p>
      <p>
        <b-c-c copy from="/chorus">
          <span slot="verb1">won't</span>
          <span slot="verb2">can't</span>
          <span slot="pronoun1">us</span>
          <span slot="pronoun2">us</span>
          <span slot="subjectIs1">We are</span>
          <span slot="subjectIs2">We are</span>
        </b-c-c> 
      </p>
      <p>
        <div>Oh, oh</div>
        <div>Don't you bring me down today</div>
        <div>Don't you bring me down, ooh</div>
        <div>Today</div>
      </p>

</div>
</template>
``` -->

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) 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. Run polymer test to run your application's test suite locally.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

0.1.43 imported 2018-09-13
0.1.42 imported 2018-09-13
0.1.41 imported 2018-09-13
0.1.40 imported 2018-08-30
0.1.39 imported 2018-08-30
0.1.38 imported 2018-08-30
0.1.37 imported 2018-08-30
0.1.36 imported 2018-08-30
0.1.35 imported 2018-08-29
0.1.34 imported 2018-08-24
0.1.33 imported 2018-08-23
0.1.32 imported 2018-08-23
0.1.31 imported 2018-08-23
0.1.30 imported 2018-08-22
0.1.29 imported 2018-08-12
0.1.28 imported 2018-08-08
0.1.27 imported 2018-08-06
0.1.26 imported 2018-08-05
0.1.25 imported 2018-07-28
0.1.24 imported 2018-07-20
0.1.23 imported 2018-07-17
0.1.22 imported 2018-07-11
0.1.21 imported 2018-07-06
0.1.20 imported 2018-07-06
0.1.19 imported 2018-07-06
0.1.18 imported 2018-07-04
0.1.17 imported 2018-06-25
0.1.16 imported 2018-06-22
0.1.15 imported 2018-06-22
0.1.14 imported 2018-06-18
0.1.13 imported 2018-06-17
0.1.12 imported 2018-06-16
0.1.11 imported 2018-06-16
0.1.10 imported 2018-06-16
0.1.7 imported 2018-01-05
0.1.6 imported 2017-12-12
0.1.5 imported 2017-12-09
0.1.4 imported 2017-12-09
0.1.3 imported 2017-12-09
0.1.2 imported 2017-11-29
0.1.1 imported 2017-11-25
0.1.0 imported 2017-11-23
0.0.19 imported 2017-10-08
0.0.18 imported 2017-10-03
0.0.17 tested 2017-10-01
0.0.16 imported 2017-10-01
0.0.15 imported 2017-10-01
0.0.14 imported 2017-09-30
0.0.13 imported 2017-09-27
0.0.12 imported 2017-09-24
0.0.11 imported 2017-09-23
0.0.10 imported 2017-09-23
0.0.9 imported 2017-09-16
0.0.8 imported 2017-09-16
0.0.7 imported 2017-09-16
0.0.6 imported 2017-09-16
0.0.5 imported 2017-09-16
0.0.4 imported 2017-09-15
0.0.3 imported 2017-09-15
0.0.2 imported 2017-09-09
0.0.1 imported 2017-08-15
0.0.0 imported 2017-08-13

Dependencies

  • xtal-latx#0.0.26
Released
2018-09-13
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+ in 0.1.12
Polymer 2.0+ in 0.1.7
Browser
Browser Independent

carbon-copy - Vaadin Add-on Directory

Copy an HTML template into a DOM node. carbon-copy - Vaadin Add-on Directory
[![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 Hello, world ``` 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

I am

No matter what they say
Words can't bring me down
Oh no
I am
In every single way
Yes words can't bring me down
Oh no
So don't you bring me down today

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

You are

No matter what they say
Words can't bring you down
Oh no
You are
In every single way
Yes words can't bring you down
Oh no
So don't you bring me down today


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

We are

No matter what they say
Words won't bring us down
Oh no
We are
In every single way
Yes words can't bring us down
Oh no
So don't you bring me down today

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.
Online