AttachedLink.js

/**
 * Custom element `<attached-link>` that renders a little icon link next to its contents.
 * 
 * Usable as `<attached-link href="url">contents</attached-link>`
 */
export default class AttachedLink extends HTMLElement {
	constructor(href=""){
		super();
		this.attachShadow({mode:"open"});
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: inline-block;
					position: relative;
				}
				a {
					display: block;
					position: absolute;
					top: 0px;
					left: -1em;
					color: inherit !important;
				}
				svg {
					width: 1em;
					height: 1em;
					fill: currentcolor;
					stroke: transparent;
					opacity: 0;
					transition: opacity 0.2s linear;
				}
				:host(:hover) svg {
					opacity: 0.75;
				}
			</style>
			<a href=${href}>
				<svg width="20" height="20" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
					<clipPath id="clip">
						<path style="transform:translate(-12px,8px) rotate(180deg)" d="M -100 -100 H 100 V 9 H 0 A 9 9 0 0 1 -9 0 H -21 A 21 21 0 0 0 0 21 H 100 V 100 H -100 Z" />
					</clipPath>
					<defs>
						<path id="part" style="transform:translate(6px,-4px)" clip-path="url(#clip)" d="M 0 18 H 24 A 18 18 0 0 0 24 -18 H 0 A 18 18 0 0 0 0 18 V 12 A 12 12 0 0 1 0 -12 H 24 A 12 12 0 0 1 24 12 H 0 Z"/>
					</defs>
					<use x="0" y="0" xlink:href="#part" style="transform:translate(50px,55px) rotate(-45deg)" />
					<use x="0" y="0" xlink:href="#part" style="transform:translate(50px,55px) rotate(135deg)" />
				</svg>
			</a>
			<slot></slot>
		`;
		this._a = this.shadowRoot.querySelector("a");
	}
	
	set href(href){
		this.setAttribute("href",href);
	}

	get href(){
		return this.getAttribute("href");
	}

	static get observedAttributes(){
		return ["href"];
	}

	/**
	 * @param {string} name
	 * @param {string} oldValue
	 * @param {string} newValue
	 */
	attributeChangedCallback(name,oldValue,newValue){
		if (name=="href"){
			this._a.href = newValue;
		}
	}
}
customElements.define("attached-link",AttachedLink);