Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Web Component with extend and external API
<script>
(function (window, document) {
document.registerElement('my-component-extended', {
extends: 'my-component-input',
prototype: Object.create(window.myComponentInput, {
publicAPI: {
value: function (contentNode) {
console.log('my-component::publicAPI');
}
}
})
});
}(window, document))
</script>
<script>
(function (window, document) {
window.myComponentInput = document.registerElement('my-component-input', {
extends: 'input',
prototype: Object.create(HTMLInputElement.prototype, {
publicAPI: {
value: function (contentNode) {
console.log('my-component-div::publicAPI');
}
}
})
});
}(window, document))
</script>
<script>
(function (window, document) {
document.registerElement('my-component', {
prototype: Object.create(HTMLElement.prototype, {
publicAPI: {
value: function (contentNode) {
console.log('my-component::publicAPI');
}
}
})
});
}(window, document))
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.5/webcomponents-lite.min.js"></script>
<link rel="import" href="my-component.html" />
<link rel="import" href="my-component-input.html" />
<link rel="import" href="my-component-extend.html" />
</head>
<body>
<my-component></my-component>
<input is="my-component-input"></input>
<my-component-extend></my-component-extend>
<script>
window.addEventListener('WebComponentsReady', function(e) {
var mc = document.querySelector('my-component');
mc.publicAPI();
var mci = document.querySelector('my-component-input');
mci.publicAPI();
var mce = document.querySelector('my-component-extend');
mce.publicAPI();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.