convert content to md

5 files changed, 126 insertions, 162 deletions

diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.md b/files/fr/web/api/shadowroot/delegatesfocus/index.md
index a42192a6a2..57433496de 100644
--- a/files/fr/web/api/shadowroot/delegatesfocus/index.md
+++ b/files/fr/web/api/shadowroot/delegatesfocus/index.md
@@ -9,36 +9,36 @@ tags:
   - ShadowRoot
 translation_of: Web/API/ShadowRoot/delegatesFocus
 ---
-<div>{{APIRef("Shadow DOM")}}</div>
+{{APIRef("Shadow DOM")}}
 
-<p><strong><code>delegatesFocus</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option <code>delegatesFocus</code> a été intialisée lors de l'attachement de la racine <em>shadow</em> (cf. {{domxref("Element.attachShadow()")}}).</p>
+**`delegatesFocus`** est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option `delegatesFocus` a été intialisée lors de l'attachement de la racine _shadow_ (cf. {{domxref("Element.attachShadow()")}}).
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.</p>
-</div>
+> **Attention :** Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>df</var> = <var>shadowRoot</var>.delegatesFocus</pre>
+    var df = shadowRoot.delegatesFocus
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un booléen : <code>true</code> si la racine <em>shadow</em> délègue la gestion du focus et <code>false</code> sinon.</p>
+Un booléen : `true` si la racine _shadow_ délègue la gestion du focus et `false` sinon.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
   ...
 
 // Est-ce que la racine gère la délégation du focus ?
-let hostElem = shadow.delegatesFocus;</pre>
+let hostElem = shadow.delegatesFocus;
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette fonctionnalité n'est actuellement décrite dans aucune spécification.</p>
+Cette fonctionnalité n'est actuellement décrite dans aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.ShadowRoot.delegatesFocus")}}</p>
+{{Compat("api.ShadowRoot.delegatesFocus")}}
diff --git a/files/fr/web/api/shadowroot/host/index.md b/files/fr/web/api/shadowroot/host/index.md
index 8b23a74117..5b3bf045e6 100644
--- a/files/fr/web/api/shadowroot/host/index.md
+++ b/files/fr/web/api/shadowroot/host/index.md
@@ -9,47 +9,36 @@ tags:
   - shadow dom
 translation_of: Web/API/ShadowRoot/host
 ---
-<div>{{APIRef("Shadow DOM")}}</div>
+{{APIRef("Shadow DOM")}}
 
-<p>La propriété <strong><code>host</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine <code>ShadowRoot</code> est attachée.</p>
+La propriété **`host`** est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine `ShadowRoot` est attachée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>element</em> = <em>shadowRoot</em>.host</pre>
+    var element = shadowRoot.host
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un élément du DOM sous la forme d'un objet {{domxref('Element')}}.</p>
+Un élément du DOM sous la forme d'un objet {{domxref('Element')}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
   ...
 
 // renvoie l'élément hôte
-let hostElem = shadow.host;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ShadowRoot.host")}}</p>
+let hostElem = shadow.host;
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}} | {{Spec2('DOM WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ShadowRoot.host")}}
diff --git a/files/fr/web/api/shadowroot/index.md b/files/fr/web/api/shadowroot/index.md
index 81af6c08ea..9c8a7816d9 100644
--- a/files/fr/web/api/shadowroot/index.md
+++ b/files/fr/web/api/shadowroot/index.md
@@ -9,58 +9,53 @@ tags:
   - Web Components
 translation_of: Web/API/ShadowRoot
 ---
-<div>{{APIRef('Shadow DOM')}}</div>
+{{APIRef('Shadow DOM')}}
 
-<p>L'interface <code><strong>ShadowRoot</strong></code>, relative à l'API <em>Shadow DOM</em>, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.</p>
+L'interface **`ShadowRoot`**, relative à l'API _Shadow DOM_, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.
 
-<p>Il est possible de récupérer une référence à la racine <em>shadow</em> d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option <code>mode</code> qui valait <code>open</code>.</p>
+Il est possible de récupérer une référence à la racine _shadow_ d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option `mode` qui valait `open`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}</dt>
- <dd>Cette propriété renvoie un booléen qui indique si l'option <code>delegatesFocus</code> a été activée lors de la liaison avec la racine <em>shadow</em> (cf. {{domxref("Element.attachShadow()")}}).</dd>
- <dt>{{domxref("ShadowRoot.host")}} {{readonlyinline}}</dt>
- <dd>Cette propriété renvoie une référence à l'élément DOM auquel la racine <code>ShadowRoot</code> est attachée.</dd>
- <dt>{{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}</dt>
- <dd>Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine <code>ShadowRoot</code>.</dd>
- <dt>{{domxref("ShadowRoot.mode")}} {{readonlyinline}}</dt>
- <dd>Cette propriété renvoie le mode utilisé pour la racine <code>ShadowRoot</code> : <code>open</code> ou <code>closed</code>. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.</dd>
-</dl>
+- {{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}
+  - : Cette propriété renvoie un booléen qui indique si l'option `delegatesFocus` a été activée lors de la liaison avec la racine _shadow_ (cf. {{domxref("Element.attachShadow()")}}).
+- {{domxref("ShadowRoot.host")}} {{readonlyinline}}
+  - : Cette propriété renvoie une référence à l'élément DOM auquel la racine `ShadowRoot` est attachée.
+- {{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}
+  - : Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine `ShadowRoot`.
+- {{domxref("ShadowRoot.mode")}} {{readonlyinline}}
+  - : Cette propriété renvoie le mode utilisé pour la racine `ShadowRoot` : `open` ou `closed`. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.
 
-<h3 id="Propriétés_incluses_via_DocumentOrShadowRoot">Propriétés incluses via <code>DocumentOrShadowRoot</code></h3>
+### Propriétés incluses via `DocumentOrShadowRoot`
 
-<p><em>L'interface <code>ShadowRoot</code> inclut les propriétés suivantes grâce au </em>mixin<em> {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.</em></p>
+_L'interface `ShadowRoot` inclut les propriétés suivantes grâce au_ mixin _{{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}._
 
-<dl>
- <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt>
- <dd>L'élément ({{domxref('Element')}}) au sein du sous-arbre <em>shadow</em> qui a le focus.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
- <dd>Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.</dd>
-</dl>
+- {{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
+  - : L'élément ({{domxref('Element')}}) au sein du sous-arbre _shadow_ qui a le focus.
+- {{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
+  - : Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>L'interface <code>ShadowRoot</code> inclut les méthodes suivantes qui proviennent du </em>mixin<em> {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.</em></p>
+_L'interface `ShadowRoot` inclut les méthodes suivantes qui proviennent du_ mixin _{{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}._
 
-<dl>
- <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
- <dd>Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
- <dd>Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
- <dd>Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
- <dd>Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.</dd>
-</dl>
+- {{domxref("DocumentOrShadowRoot.getSelection()")}}
+  - : Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.
+- {{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
+  - : Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.
+- {{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
+  - : Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.
+- {{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
+  - : Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Les fragments de code suivants sont extraits de l'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">voir le résultat en <em>live</em></a>) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.</p>
+Les fragments de code suivants sont extraits de l'exemple [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks) ([voir le résultat en _live_](https://mdn.github.io/web-components-examples/life-cycle-callbacks)) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.
 
-<p>Dans la définition de la classe pour l'élément <code>&lt;custom-square&gt;</code>, on ajoute certains <em>callbacks</em> permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe <code>updateStyle()</code> qui applique la taille et la couleur à l'élément. On lui passe l'argument <code>this</code> (c'est-à-dire l'élément lui-même).</p>
+Dans la définition de la classe pour l'élément `<custom-square>`, on ajoute certains _callbacks_ permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe `updateStyle()` qui applique la taille et la couleur à l'élément. On lui passe l'argument `this` (c'est-à-dire l'élément lui-même).
 
-<pre class="brush: js">connectedCallback() {
+```js
+connectedCallback() {
   console.log("Le carré personnalisé a été ajouté à la page.");
   updateStyle(this);
 }
@@ -68,14 +63,16 @@ translation_of: Web/API/ShadowRoot
 attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
   console.log("Les attributs du carré ont changé.");
   updateStyle(this);
-}</pre>
+}
+```
 
-<p>Quant à la fonction <code>updateStyle()</code>, voyons ici son fonctionnement. On récupère une référence au <em>shadow DOM</em> avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le <em>shadow DOM</em> et on met à jour le CSS pour cet élément :</p>
+Quant à la fonction `updateStyle()`, voyons ici son fonctionnement. On récupère une référence au _shadow DOM_ avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le _shadow DOM_ et on met à jour le CSS pour cet élément :
 
-<pre class="brush: js">function updateStyle(elem) {
+```js
+function updateStyle(elem) {
   var shadow = elem.shadowRoot;
   var childNodes = shadow.childNodes;
-  for(var i = 0; i &lt; childNodes.length; i++) {
+  for(var i = 0; i < childNodes.length; i++) {
     if(childNodes[i].nodeName === 'STYLE') {
       childNodes[i].textContent =
         'div {' +
@@ -85,27 +82,15 @@ attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
         '}';
     }
   }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ShadowRoot")}}</p>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}} | {{Spec2('DOM WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ShadowRoot")}}
diff --git a/files/fr/web/api/shadowroot/innerhtml/index.md b/files/fr/web/api/shadowroot/innerhtml/index.md
index 5580e5ad2c..71b322ed76 100644
--- a/files/fr/web/api/shadowroot/innerhtml/index.md
+++ b/files/fr/web/api/shadowroot/innerhtml/index.md
@@ -10,31 +10,32 @@ tags:
   - shadow dom
 translation_of: Web/API/ShadowRoot/innerHTML
 ---
-<div>{{APIRef("Shadow DOM")}}</div>
+{{APIRef("Shadow DOM")}}
 
-<p>La propriété <strong><code>innerHTML</code></strong>, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine <code>ShadowRoot</code>.</p>
+La propriété **`innerHTML`**, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine `ShadowRoot`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>domString</em> = <em>shadowRoot</em>.innerHTML
-<em>shadowRoot</em>.innerHTML = <em>domString</em>
-</pre>
+    var domString = shadowRoot.innerHTML
+    shadowRoot.innerHTML = domString
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une chaîne de caractères {{domxref("DOMString")}}.</p>
+Une chaîne de caractères {{domxref("DOMString")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
-shadow.innerHTML = '&lt;strong&gt;Cet élément devrait être plus important !&lt;/strong&gt;';</pre>
+shadow.innerHTML = '<strong>Cet élément devrait être plus important !</strong>';
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété ne fait pas encore partie d'une spécification. Voir <a href="https://github.com/w3c/DOM-Parsing/issues/21">cette <em>issue</em></a> pour le projet de spécification.</p>
+Cette propriété ne fait pas encore partie d'une spécification. Voir [cette _issue_](https://github.com/w3c/DOM-Parsing/issues/21) pour le projet de spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.ShadowRoot.innerHTML")}}</p>
+{{Compat("api.ShadowRoot.innerHTML")}}
diff --git a/files/fr/web/api/shadowroot/mode/index.md b/files/fr/web/api/shadowroot/mode/index.md
index 2e68fcb24e..a328bb7f87 100644
--- a/files/fr/web/api/shadowroot/mode/index.md
+++ b/files/fr/web/api/shadowroot/mode/index.md
@@ -10,23 +10,24 @@ tags:
   - shadow dom
 translation_of: Web/API/ShadowRoot/mode
 ---
-<div>{{APIRef("Shadow DOM")}}</div>
+{{APIRef("Shadow DOM")}}
 
-<p>La propriété <strong><code>mode</code></strong>, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir <code>open</code> ou <code>closed</code> et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript.</p>
+La propriété **`mode`**, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir `open` ou `closed` et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript.
 
-<p>Lorsque le mode d'une racine <em>shadow</em> vaut <code>closed</code>, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript).</p>
+Lorsque le mode d'une racine _shadow_ vaut `closed`, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>mode</em> = <em>shadowRoot</em>.mode</pre>
+    var mode = shadowRoot.mode
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une valeur définie via l'énumération <code><a href="https://dom.spec.whatwg.org/#enumdef-shadowrootmode">ShadowRootMode</a></code> : soit <code>open</code>, soit <code>closed</code>.</p>
+Une valeur définie via l'énumération [`ShadowRootMode`](https://dom.spec.whatwg.org/#enumdef-shadowrootmode) : soit `open`, soit `closed`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
 // Une autre façon de vérifier si la racine est ouverte :
@@ -35,27 +36,15 @@ if(shadow) {
   // Si elle est ouverte, on ferme la racine pour
   // cacher ce qu'il y a à l'intérieur.
   shadow.mode = 'closed';
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ShadowRoot.mode")}}</p>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}} | {{Spec2('DOM WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ShadowRoot.mode")}}