From Code to Community: Sponsoring The Perl and Raku Conference 2025 Learn more

DDICK / Firefox-Marionette-1.64 / t / data / elements.html 

            

              
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

              
<!DOCTYPE html>
<html lang="en-au">
  <head>
    <meta charset="utf-8">
    <meta name="source" content="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">
    <title>Life cycle callbacks test</title>
    <style>
      custom-square {
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Elements</h1>
    <span>
      <button class="add">Add custom-square to DOM</button>
      <button class="update">Update attributes</button>
      <button class="remove">Remove custom-square from DOM</button>
    </span>
    <iframe src="iframe.html" height="200" width="300" name="iframe"></iframe>
    <iframe src="iframe.html" height="200" width="300" name="iframe2"></iframe>
    <script>
<!--
// Create a class for the element
class Square extends HTMLElement {
  // Specify observed attributes so that
  // attributeChangedCallback will work
  static get observedAttributes() {
    return ['c', 'l'];
  }
  constructor() {
    // Always call super first in constructor
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const div = document.createElement('div');
    div.setAttribute('id', 'outer-div');
    div.setAttribute('title', 'In the Shadow Realms');
    div.setAttribute('class', 'outer-div-class');
    const style = document.createElement('style');
    shadow.appendChild(style);
    shadow.appendChild(div);
    const meta = document.createElement('meta');
    meta.setAttribute('name', 'meta-name');
    meta.setAttribute('title', 'Very META');
    shadow.appendChild(meta);
    const span1 = document.createElement('span');
    shadow.appendChild(span1);
    const span2 = document.createElement('span');
    shadow.appendChild(span2);
    const link = document.createElement('a');
    link.setAttribute('href', 'https://metacpan.org');
    const innerText = document.createTextNode('MetaCPAN');
    link.appendChild(innerText);
    shadow.appendChild(link);
  }
  connectedCallback() {
    console.log('Custom square element added to page.');
    updateStyle(this);
  }
  disconnectedCallback() {
    console.log('Custom square element removed from page.');
  }
  adoptedCallback() {
    console.log('Custom square element moved to new page.');
  }
  attributeChangedCallback(name, oldValue, newValue) {
    console.log('Custom square element attributes changed.');
    updateStyle(this);
  }
}
customElements.define('custom-square', Square);
function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  shadow.querySelector('style').textContent = `
    div {
      width: ${elem.getAttribute('l')}px;
      height: ${elem.getAttribute('l')}px;
      background-color: ${elem.getAttribute('c')};
    }
  `;
}
const add = document.querySelector('.add');
const update = document.querySelector('.update');
const remove = document.querySelector('.remove');
let square;
update.disabled = true;
remove.disabled = true;
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
add.onclick = function() {
  // Create a custom square element
  square = document.createElement('custom-square');
  square.setAttribute('l', '100');
  square.setAttribute('c', 'red');
  document.body.appendChild(square);
  update.disabled = false;
  remove.disabled = false;
  add.disabled = true;
};
update.onclick = function() {
  // Randomly update square's attributes
  square.setAttribute('l', random(50, 200));
  square.setAttribute('c', `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`);
};
remove.onclick = function() {
  // Remove the square
  document.body.removeChild(square);
  update.disabled = true;
  remove.disabled = true;
  add.disabled = false;
};
// -->
    </script>
  </body>
</html>