Change the behavior of clonable to be more opt-in

See the discussion here:

whatwg/html#10107 (comment)

The new consensus is that the old behavior was likely web-
incompatible, plus not very developer-desirable. The new behavior
adds a `shadowrootclonable` attribute for declarative shadow dom
to opt-in to clonable shadow roots.

This is a slight behavior change from the existing shipped
behavior, in that before the `clonable` concept was introduced,
*any* declarative shadow root within a `<template>` would be
cloned. Now, that behavior is opt in. So:

old:
  <template>
    <div>
      <template shadowrootmode=open>
        I do NOT get cloned!
      </template>
    </div>
  </template>

new:
  <template>
    <div>
      <template shadowrootmode=open shadowrootclonable>
        I get cloned!
      </template>
    </div>
  </template>

See these three spec PRs:
  whatwg/dom#1246
  whatwg/html#10069
  whatwg/html#10117

Bug: 1510466
Change-Id: Ice7c7579094eb08b882c4bb44f93045f23b8f222

shadow-dom/shadow-root-clonable.html

@@ -47,14 +47,26 @@
  div.setHTMLUnsafe('<div><template shadowrootmode=open><input></template></div>');
  const root = div.firstElementChild.shadowRoot;
  assert_true(!!root);
- assert_true(root.clonable, "clonable is automatically true for declarative shadow root");
+ assert_true(!root.clonable, "clonable is *not* automatically true for declarative shadow root");
+
+ const clone = div.cloneNode(true);
+ const clonedRoot = clone.firstElementChild.shadowRoot;
+ assert_true(!clonedRoot,'no shadow root gets cloned');
+}, "declarative shadow roots do *not* get clonable: true automatically");
+
+test(() => {
+ const div = document.createElement("div");
+ div.setHTMLUnsafe('<div><template shadowrootmode=open shadowrootclonable><input></template></div>');
+ const root = div.firstElementChild.shadowRoot;
+ assert_true(!!root);
+ assert_true(root.clonable, "clonable gets added when shadowrootclonable is present");
 
  const clone = div.cloneNode(true);
  const clonedRoot = clone.firstElementChild.shadowRoot;
  assert_true(!!clonedRoot);
  assert_equals(clonedRoot.children.length, 1, "children count");
  assert_equals(clonedRoot.children[0].localName, "input", "children content");
-}, "declarative shadow roots get clonable: true automatically");
+}, "declarative shadow roots can opt in to clonable with shadowrootclonable");
 </script>
 
 <template id="test">
@@ -70,8 +82,6 @@
  assert_true(!!root);
  const clone = template.content.cloneNode(true);
  const clonedRoot = clone.querySelector('#host').shadowRoot;
- assert_true(!!clonedRoot);
- assert_equals(clonedRoot.children.length, 1, "children count");
- assert_equals(clonedRoot.children[0].localName, "input", "children content");
-}, "declarative shadow roots inside templates also get cloned automatically");
+ assert_true(!clonedRoot,'no shadow root gets cloned');
+}, "declarative shadow roots inside templates do *not* get cloned automatically");
 </script>