https://chrome.dev/components/cookie-banner.js

1const template = document.createElement('template');
2template.innerHTML = `
3<style>
4* { margin: 0}
5aside {
6  background: #fff;
7  border: 0;
8  border-top: 1px solid #eee;
9  box-shadow: 0 0 1em #0001;
10  font-size: 0.9em;
11  gap: 1em;
12  height: auto;
13  inset: 0;
14  padding: 1em;
15  position: fixed;
16  text-wrap-style: pretty;
17  top: unset;
18  translate: 0px 100%;
19  transition: translate .2s ease, display .2s allow-discrete;
20  width: auto;
21  z-index: 1000;
22}
23aside.is-open {
24  display: grid;
25  translate: 0px 0px;
26}
27@media (min-width: 540px) {
28  aside {
29    grid-template-columns: 1fr max-content;
30    align-items: center;
31  }
32}
33button {
34  background: #eee;
35  border: none;
36  cursor: pointer;
37  font: inherit;
38  padding: .5em 1.5em;
39  border-radius: .4em;
40  width: 100%;
41}
42button:hover {
43  background: #ddd;
44}
45</style>
46<aside class="is-open">
47  <p>
48    Chrome.dev uses cookies from Google to deliver and
49    enhance the quality of its services and to analyze traffic.
50    <a href="https://policies.google.com/technologies/cookies">Learn more.</a>
51  </p>
52  <button>Ok, Got it.</button>
53</aside>`;
54
55function storage(method, ...args) {
56  try {
57    return localStorage[method + 'Item'](...args);
58  } catch {}
59}
60
61class CookieBanner extends HTMLElement {
62  constructor() {
63    super();
64    this.attachShadow({mode: 'open'});
65    this.shadowRoot.appendChild(template.content.cloneNode(true));
66  }
67  connectedCallback() {
68    const banner = this.shadowRoot.querySelector('aside');
69    const button = this.shadowRoot.querySelector('button');
70    button.addEventListener('click', (event) => {
71      banner.classList.remove('is-open');
72      banner.ontransitionend = () => this.remove();
73      storage('set', 'cdd-cookie-consent', '1');
74    });
75  }
76}
77
78if (!storage('get', 'cdd-cookie-consent')) {
79  customElements.define('cookie-banner', CookieBanner);
80}