ryandejaegher · May 19, 2021 18:21
diff --git a/codeswing.json b/codeswing.json
 {
  "scripts": [],
  "styles": []
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    <icon-link>
        <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 14.667H24.6662V17.3332H4V14.667Z" fill="black"/>
            <path d="M18.9339 24.9339L17.0664 23.0664L24.1339 16.0001L17.0664 8.93389L18.9339 7.06641L27.8664 16.0002L18.9339 24.9339Z" fill="black"/>
            </svg>
            
            click
    </icon-link>
 </body>
 </html>
diff --git a/script.js b/script.js
 (function () {


    // Create the template for the component
    const template = document.createElement('template');
    template.innerHTML = `
    <style>
        :host {
            display: inline-flex;
        }

        .button {
            display: inline-flex;
            background: red;
            padding: 8px 16px;
            align-items: center;
            gap: 8px;
        }
        

    </style>    

    <a href="#" class="button">
    <slot name="icon-left"></slot>
    <slot></slot>
    <slot name="icon-right"></slot>
    </a>
    `

    class IconLink extends HTMLElement {
        // Always call super first in constrcutor
        constructor() {
            super();
            // Create shadow root
            this.attachShadow({
                mode: 'open'
            });

            // Insert the template into the shadow Root/DOM
            this.shadowRoot.append(template.content.cloneNode(true))
        }

        get text() {
            return this.getAttribute('text')
        }

        set text(newValue) {
            this.setAttribute('text', newValue)
        }



        // Web Component lifecycle callbacks

        // Runs as soon as the component is used in document
        connectedCallback() {
            console.log('I have been added to the document')
            this.shadowRoot.querySelector('h1').textContent = this.text
        }

        // Runs as soon as the component is removed or disconnected from the document
        disconnectedCallback() {
            console.log('I have been removed')
        }


        // Runs when the component is moved within the document
        adoptedCallback() {
            console.log('I have moved')
        }

        // Runs when one of the documents observed elements is changed in some way
        attributeChangedCallback(name, oldValue, newValue) {
            console.log('My attributes have changed')
            console.log(`${name} changed from ${oldValue} to ${newValue}`)

        }

        // You need to list the attributes you want to observe in order for the attributeChangedCallback to work
        // This should return an array containing the names of the attributes you want to observe
        static get observedAttributes() {
            return ['text']
        }


    }

    window.customElements.define('icon-link', IconLink);
 })();
diff --git a/style.css b/style.css
 *,
 *:before,
 *:after {
    box-sizing: border-box;
 }

 html,body {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
 }

 .flex {
    display: flex;
 }

 .flex-col {
    flex-direction: column;   
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<icon-link>
	<svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M4 14.667H24.6662V17.3332H4V14.667Z" fill="black"/>
	<path d="M18.9339 24.9339L17.0664 23.0664L24.1339 16.0001L17.0664 8.93389L18.9339 7.06641L27.8664 16.0002L18.9339 24.9339Z" fill="black"/>
	</svg>

	click
	</icon-link>
	</body>
	</html>
	(function () {


	// Create the template for the component
	const template = document.createElement('template');
	template.innerHTML = `
	<style>
	:host {
	display: inline-flex;
	}

	.button {
	display: inline-flex;
	background: red;
	padding: 8px 16px;
	align-items: center;
	gap: 8px;
	}


	</style>

	<a href="#" class="button">
	<slot name="icon-left"></slot>
	<slot></slot>
	<slot name="icon-right"></slot>
	</a>
	`

	class IconLink extends HTMLElement {
	// Always call super first in constrcutor
	constructor() {
	super();
	// Create shadow root
	this.attachShadow({
	mode: 'open'
	});

	// Insert the template into the shadow Root/DOM
	this.shadowRoot.append(template.content.cloneNode(true))
	}

	get text() {
	return this.getAttribute('text')
	}

	set text(newValue) {
	this.setAttribute('text', newValue)
	}



	// Web Component lifecycle callbacks

	// Runs as soon as the component is used in document
	connectedCallback() {
	console.log('I have been added to the document')
	this.shadowRoot.querySelector('h1').textContent = this.text
	}

	// Runs as soon as the component is removed or disconnected from the document
	disconnectedCallback() {
	console.log('I have been removed')
	}


	// Runs when the component is moved within the document
	adoptedCallback() {
	console.log('I have moved')
	}

	// Runs when one of the documents observed elements is changed in some way
	attributeChangedCallback(name, oldValue, newValue) {
	console.log('My attributes have changed')
	console.log(`${name} changed from ${oldValue} to ${newValue}`)

	}

	// You need to list the attributes you want to observe in order for the attributeChangedCallback to work
	// This should return an array containing the names of the attributes you want to observe
	static get observedAttributes() {
	return ['text']
	}


	}

	window.customElements.define('icon-link', IconLink);
	})();
	*,
	*:before,
	*:after {
	box-sizing: border-box;
	}

	html,body {
	height: 100%;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	.flex {
	display: flex;
	}

	.flex-col {
	flex-direction: column;
	}