-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
78 lines (61 loc) · 2.31 KB
/
index.md
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
---
title: "Element: shadowRoot property"
short-title: shadowRoot
slug: Web/API/Element/shadowRoot
page-type: web-api-instance-property
browser-compat: api.Element.shadowRoot
---
{{APIRef("Shadow DOM")}}
The `Element.shadowRoot` read-only property
represents the shadow root hosted by the element.
Use {{DOMxRef("Element.attachShadow()")}} to add a shadow root to an existing element.
## Value
A {{DOMxRef("ShadowRoot")}} object instance, or `null` if the associated
shadow root was attached with its {{DOMxRef("ShadowRoot.mode", "mode")}} set to
`closed`. (See {{DOMxRef("Element.attachShadow()")}} for further details).
## Examples
The following snippets are taken from our [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks)
example ([see it live also](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)), which creates an element that displays a square of a size and color
specified in the element's attributes.
Inside the `<custom-square>` element's class definition we include
some life cycle callbacks that make a call to an external function,
`updateStyle()`, which actually applies the size and color to the element.
You'll see that we are passing it `this` (the custom element itself) as a
parameter.
```js
class Square extends HTMLElement {
connectedCallback() {
console.log("Custom square element added to page.");
updateStyle(this);
}
attributeChangedCallback(name, oldValue, newValue) {
console.log("Custom square element attributes changed.");
updateStyle(this);
}
}
```
In the `updateStyle()` function itself, we get a reference to the shadow DOM
using `Element.shadowRoot`. From here we use standard DOM traversal
techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then
update the CSS found inside it:
```js
function updateStyle(elem) {
const shadow = elem.shadowRoot;
const childNodes = Array.from(shadow.childNodes);
childNodes.forEach((childNode) => {
if (childNode.nodeName === "STYLE") {
childNode.textContent = `
div {
width: ${elem.getAttribute("l")}px;
height: ${elem.getAttribute("l")}px;
background-color: ${elem.getAttribute("c")};
}
`;
}
});
}
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}