34 lines
752 B
JavaScript
34 lines
752 B
JavaScript
const template = document.createElement('template');
|
|
|
|
template.innerHTML = `
|
|
<style>
|
|
#card {
|
|
align-items: flex-start;
|
|
background-color: var(--wc-card-background-color);
|
|
border-radius: var(--wc-card-border-radius);
|
|
box-shadow: var(--wc-card-box-shadow);
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-start;
|
|
margin: var(--wc-card-margin);
|
|
padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div id="card" part="main">
|
|
<slot></slot>
|
|
</div>
|
|
`
|
|
|
|
class card extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
this._shadowRoot = this.attachShadow({ 'mode': 'open' });
|
|
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
|
}
|
|
}
|
|
|
|
window.customElements.define('wc-card', card);
|