Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- customElements.define('my-element', class extends HTMLElement {
- constructor() {
- super();
- const shadow = this.attachShadow({mode: 'open'});
- shadow.innerHTML = `
- <style> #custom-shadow { color: red; } ::slotted(h1) { font-size: 38px; } :host { width: 600px; }</style>
- <slot id="headerSlot" name="header"></slot>
- <div id="custom-shadow">My custom shadow element</div>
- <slot id="footerSlot" name="footer"></slot>
- `;
- this.addEventListener('click', e => {
- this.toggleSomething();
- });
- }
- toggleSomething() {
- //...
- }
- get disabled() {
- return this.hasAttribute('disabled');
- }
- set disabled(val) {
- if (val) {
- this.setAttribute('disabled', '');
- } else {
- this.removeAttribute('disabled');
- }
- }
- });
- // <my-element>
- // <h1 slot="header">My Header Slot</h1>
- // <button slot="footer">Logout</button>
- // <a slot="footer">Copyright info</a>
- // </my-element>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement