Make Fullscreen work with shadow trees

This implements the change (roughly) agreed upon at WICG/webcomponents#180 (comment). That also contains most of the discussion that led to this change.

This fixes WICG/webcomponents#180 & fixes #42.

fullscreen.bs

@@ -110,8 +110,8 @@ and <a>add</a> it to its <a>node document</a>'s <a>top layer</a>.
 <p>Whenever the <a>removing steps</a> run with an <var>oldNode</var>, run these steps:
 
 <ol>
- <li><p>Let <var>nodes</var> be <var>oldNode</var>'s <a>inclusive descendants</a> that have their
- <a>fullscreen flag</a> set, in <a>tree order</a>.
+ <li><p>Let <var>nodes</var> be <var>oldNode</var>'s <a>shadow-including inclusive descendants</a>
+ that have their <a>fullscreen flag</a> set, in <a>shadow-including tree order</a>.
 
  <li>
   <p>For each <var>node</var> in <var>nodes</var>, run these substeps:
@@ -153,14 +153,17 @@ partial interface Element {
 
 partial interface Document {
   [LenientSetter] readonly attribute boolean fullscreenEnabled;
-  [LenientSetter] readonly attribute Element? fullscreenElement;
   [LenientSetter] readonly attribute boolean fullscreen; // historical
 
   Promise&lt;void> exitFullscreen();
 
   attribute EventHandler onfullscreenchange;
   attribute EventHandler onfullscreenerror;
 };
+
+partial interface DocumentOrShadowRoot {
+  [LenientSetter] readonly attribute Element? fullscreenElement;
+};
 </pre>
 
 <dl class=domintro>
@@ -171,20 +174,22 @@ partial interface Document {
  <dd><p>Returns true if <var>document</var> has the ability to display <a>elements</a> fullscreen
  and <a>fullscreen is supported</a>, or false otherwise.
 
- <dt><code><var>document</var> . {{Document/fullscreenElement}}</code>
- <dd><p>Returns <var>document</var>'s <a>fullscreen element</a>.
-
  <dt><code><var>promise</var> = <var>document</var> . {{Document/exitFullscreen()}}</code>
  <dd><p>Stops <var>document</var>'s <a>fullscreen element</a> from being displayed fullscreen and
  fulfills <var>promise</var> when done.
+
+ <dt><code><var>document</var> . {{DocumentOrShadowRoot/fullscreenElement}}</code>
+ <dd><p>Returns <var>document</var>'s <a>fullscreen element</a>.
+
+ <dt><code><var>shadowroot</var> . {{DocumentOrShadowRoot/fullscreenElement}}</code>
+ <dd><p>Returns <var>shadowroot</var>'s <a>fullscreen element</a>.
 </dl>
 
 <p>A <dfn>fullscreen element ready check</dfn> for an <a>element</a> <var>element</var> returns true
 if all of the following are true, and false otherwise:
 
 <ul>
-
- <li><p><var>element</var> is <a>in a document</a>.
+ <li><p><var>element</var> is <a>connected</a>.
 
  <li><p><var>element</var>'s <a>node document</a> is <a>allowed to use</a> the feature indicated by
  attribute name <code>allowfullscreen</code>.
@@ -283,14 +288,27 @@ these steps:
 return true if the <a>context object</a> is <a>allowed to use</a> the feature indicated by attribute
 name <code>allowfullscreen</code> and <a>fullscreen is supported</a>, and false otherwise.
 
-<p>The <dfn attribute for=Document><code>fullscreenElement</code></dfn> attribute's getter must
-return <a>context object</a>'s <a>fullscreen element</a>.
-
 <p>The <dfn attribute for=Document><code>fullscreen</code></dfn> attribute's getter must return
 false if <a>context object</a>'s <a>fullscreen element</a> is null, and true otherwise.
 
-<p class=note>Use
-<a attribute for=Document lt=fullscreenElement><code>document.fullscreenElement</code></a> instead.
+<p class=note>Use the {{DocumentOrShadowRoot/fullscreenElement}} attribute instead.
+
+<p>The
+<dfn attribute for=DocumentOrShadowRoot id=dom-document-fullscreenelement><code>fullscreenElement</code></dfn>
+attribute's getter must run these steps:
+
+<ol>
+ <li><p>If the <a>context object</a> is a <a for=/>shadow root</a> and its
+ <a for=DocumentFragment>host</a> is not <a>connected</a>, then return null.</li>
+
+ <li><p>Let <var>candidate</var> be the result of <a>retargeting</a> <a>fullscreen element</a>
+ against the <a>context object</a>.
+
+ <li><p>If <var>candidate</var> and the <a>context object</a> are in the same <a>tree</a>, then
+ return <var>candidate</var>.
+
+ <li><p>Return null.
+</ol>
 
 <p>To <dfn>collect documents to unfullscreen</dfn> given <var>doc</var>, run these steps:
 
@@ -461,8 +479,8 @@ following characteristics:
  is the viewport, and the initial containing block otherwise.
 
  <li><p>If it is an element, it and its <a><code>::backdrop</code></a> pseudo-element are not
- rendered if its <a>inclusive ancestor</a> has the <code>display</code> property set to
- <code>none</code>.
+ rendered if its <a>shadow-including inclusive ancestor</a> has the <code>display</code> property
+ set to <code>none</code>.
 
  <li><p>If its specified <code>display</code> property is <code>contents</code>, it computes to
  <code>block</code>.
@@ -503,11 +521,17 @@ properties apply to this pseudo-element either.
 <h3 id=:fullscreen-pseudo-class><code>:fullscreen</code> pseudo-class</h3>
 
 <p>The <dfn id=css-pc-fullscreen><code>:fullscreen</code></dfn> pseudo-class must match any
-<a>element</a> that has its <a>fullscreen flag</a> set.
+<a>element</a> <var>element</var> for which one of the following conditions is true:
 
-<p class="note no-backref">This makes it different from the {{Document/fullscreenElement}} API,
-which returns a <a>document</a>'s <a>fullscreen element</a>.
+<ul>
+ <li><p><var>element</var>'s <a>fullscreen flag</a> is set.
+
+ <li><p><var>element</var> is a <a>shadow host</a> and the result of <a>retargeting</a> its
+ <a>node document</a>'s <a>fullscreen element</a> against <var>element</var> is <var>element</var>.
+</ul>
 
+<p class="note no-backref">This makes it different from the
+{{DocumentOrShadowRoot/fullscreenElement}} API, which returns the topmost <a>fullscreen element</a>.
 
 <h3 id=user-agent-level-style-sheet-defaults>User-agent level style sheet defaults</h3>
 <!-- HTML's "The CSS user agent style sheet and presentational hints" section uses this term -->