Add clonable option and attribute

files/en-us/web/api/element/attachshadow/index.md

@@ -74,6 +74,10 @@ attachShadow(options)
             element.shadowRoot; // Returns null
             ```
 
+    - `clonable` {{Optional_Inline}}
+
+      - : A boolean that specifies whether the shadow root is clonable: when set to `true`, the shadow host cloned with {{domxref("Node.cloneNode()")}} or {{domxref("Document.importNode()")}} will include shadow root in the copy. Its default value is `false`, unless the shadow root is created via declarative shadow DOM.
+
     - `delegatesFocus` {{Optional_Inline}}
 
       - : A boolean that, when set to `true`, specifies behavior that mitigates custom element issues around focusability.

files/en-us/web/api/shadowroot/clonable/index.md

@@ -0,0 +1,32 @@
+---
+title: "ShadowRoot: clonable property"
+short-title: clonable
+slug: Web/API/ShadowRoot/clonable
+page-type: web-api-instance-property
+browser-compat: api.ShadowRoot.clonable
+---
+
+{{APIRef("Shadow DOM")}}
+
+The **`clonable`** read-only property of the {{domxref("ShadowRoot")}} interface returns `true` if the shadow root is clonable, and `false` otherwise. It's always returns `true` for shadow roots created via declarative shadow DOM or can be set via {{domxref("Element.attachShadow()")}} `clonable` option.
+
+## Examples
+
+```js
+const host = document.createElement("div");
+const shadowRoot = host.attachShadow({
+  mode: "open",
+  clonable: true,
+});
+
+shadowRoot.clonable;
+// true
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/shadowroot/index.md

@@ -20,6 +20,8 @@ You can retrieve a reference to an element's shadow root using its {{domxref("El
 - {{domxref("ShadowRoot.adoptedStyleSheets")}}
   - : Add an array of constructed stylesheets to be used by the shadow DOM subtree.
     These may be shared with other DOM subtrees that share the same parent {{domxref("Document")}} node, and the document itself.
+- {{domxref("ShadowRoot.clonable")}} {{ReadOnlyInline}}
+  - : Returns a boolean that indicates whether the shadow root is clonable, which can be set via {{domxref("Element.attachShadow()")}} `clonable` option.
 - {{domxref("ShadowRoot.delegatesFocus")}} {{ReadOnlyInline}}
   - : Returns a boolean that indicates whether `delegatesFocus` was set when the shadow was attached (see {{domxref("Element.attachShadow()")}}).
 - {{DOMxRef("ShadowRoot.fullscreenElement")}} {{ReadOnlyInline}}