Live
<closable-surface demo> <h2>Hello world with a longer title. Check this out, the text will wrap below the close icon.</h2> <p>In this example, the content of this surface will not collide with the close button when the surface is resized or content is changed. There is a floating element which causes text to wrap around the corner where the button appears. Then the button is positioned in the corner based on the parent's reference.</p> <p>You can remove the <code>demo</code> attribute from the <code>closable-surface</code> element to see the final effect without the blue visualized floating box.</p></closable-surface>
Live
x
body { font-family: sans-serif;}closable-surface { border: 1px solid black; border-radius: .5em;}h2 { margin: 0; font-size: 2em;}code { background: #eee; padding: 0 2px;}
Live
xxxxxxxxxx61
const html = `<style type="text/css"> :host { display: block; position: relative; overflow: hidden; max-width: 500px; margin: 0 auto; --padding: 1rem; --button-size: 2em; padding: var(--padding); } span.floater { float: right; display: block; width: calc(var(--button-size) - var(--padding)); height: calc(var(--button-size) - var(--padding)); font-size: 1.5em; } :host([demo]) span.floater { background: rgba(0,0,255, .3); } button { position: absolute; top: 0; right: 0; background: rgba(240, 240, 240, 0); font: inherit; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1/1; width: var(--button-size); transition: .218s ease; } button:hover { background: rgba(240, 240, 240, .8); }</style><div> <span class="floater"> <button>×</button> </span> <slot></slot></div>`class ClosableSurface extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open'}).innerHTML = html; }}window.customElements.define('closable-surface', ClosableSurface);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.