Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class CoolCard extends HTMLElement {
- constructor() {
- // MUST to allow HTMLElement interface to set
- // itself up so we can take advantage of it
- super();
- }
- connectedCallback() {
- // Every time a cool-card gets inserted into a
- // document this asynchronous callback gets called
- const shadow = this.attachShadow({mode: 'open'});
- shadow.innerHTML = `
- <style>
- div.card {
- width: 100%;
- max-width: 300px;
- display: inline-block;
- box-shadow: 0px 1px 3px rgba(0, 0, 0, .6);
- margin: 10px;
- padding: 10px;
- background: white;
- }
- </style>
- <div class="card">
- <h2>CoolCard Title</h2>
- </div>
- `;
- }
- }
- // Tell the browser about our 'cool-card' custom element
- customElements.define('cool-card', CoolCard);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement