Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Web component : Custom text Elements</title>
  
</head>
<body>
  <template id="italicTemplate">
    <style>
        :host::shadow i {
            font-size:20px;
        }
    </style>
    <i><!--Text Placeholder --></i>
</template>
  
<italic-text title="Sandeep Kumar Patel"></italic-text>
</body>
</html>
 
    (function() {
        var selfDocument = document.currentScript.ownerDocument,
            objectPrototype = Object.create(HTMLElement.prototype);
        Object.defineProperty(objectPrototype, 'title', {
            writable : true
        });
        objectPrototype.createdCallback = function() {
            var shadow = this.createShadowRoot(),
                templateContent = selfDocument.querySelector('#italicTemplate').content,
                templateNodes = document.importNode(templateContent, true),
                italicElement = templateNodes.querySelector("i");
            italicElement.innerText = this.title;
            shadow.appendChild(templateNodes);
        };
        var digitalClockElement = document.registerElement("italic-text", {
            prototype: objectPrototype
        });
    })();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
saan1984pro
0viewers