A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

Component Model Discussion: Rendering: Difference between revisions

From WHATWG Wiki
Jump to navigation Jump to search
(Discussion on various ways of rendering)
 
(added case characters for reference, text tweaks)
Line 18: Line 18:
== Rendering ==
== Rendering ==


This consists of the following:
This consists of the following, more or less orthogonal, sub-questions


* is the host element rendered or not?
* is the host element rendered or not?
* is the shadow root rendered or not?
* is the shadow root rendered or not?
* is the shadow root an element or a separate node type?
* is the shadow root an element or a separate node type?
* using <code>display: transparent</code>?


These are more or less orthogonal, and all combinations have their respective merits and problems. Assume we have the following DOM structure:
Almost all combinations of the above have their respective merits and problems. Assume we have the following DOM structure:


   <A>
   <A>
Line 36: Line 37:
This could conceivably be rendered in the following ways:
This could conceivably be rendered in the following ways:


=== rendered host element, rendered shadow root, shadow root is element ===
=== [A] rendered host element, rendered shadow root, shadow root is element ===


   A---------------------------------------------------------------------+
   A---------------------------------------------------------------------+
Line 57: Line 58:
* The potential gaps between the shadow root's rectangle and the outer host element's rectangle don't directly map to a DOM position.  
* The potential gaps between the shadow root's rectangle and the outer host element's rectangle don't directly map to a DOM position.  


=== rendered host element with default <code>display: transparent</code>, rendered shadow root, shadow root is element ===
=== [B] rendered host element with default <code>display: transparent</code>, rendered shadow root, shadow root is element ===


   A-------------------------------------------------------+
   A-------------------------------------------------------+
Line 76: Line 77:


* Containing document can't style the shadow host, but this is more apparent because of <code>display: transparent</code>. Containing document could set <code>display</code> to something different if needed.
* Containing document can't style the shadow host, but this is more apparent because of <code>display: transparent</code>. Containing document could set <code>display</code> to something different if needed.
* If <code>display</code> is set to something different it becomes case [A], with the associated issues.


=== rendered host element, rendered shadow root, shadow root is separate node type, shadow root's rectangle always is the same as the host element's (no gap) ===
=== [C] rendered host element, rendered shadow root, shadow root is separate node type, shadow root's rectangle always is the same as the host element's (no gap) ===


   A-------------------------------------------------------+
   A-------------------------------------------------------+
Line 96: Line 98:
* <code>margin</code>, <code>padding</code>, <code>position</code> et al must not apply, so need to define how styles apply to ShadowRoot in detail.
* <code>margin</code>, <code>padding</code>, <code>position</code> et al must not apply, so need to define how styles apply to ShadowRoot in detail.


=== rendered host element, shadow root not rendered ===
=== [D] rendered host element, shadow root not rendered ===


   A-----------------------------------------------------+
   A-----------------------------------------------------+
Line 111: Line 113:
* The potential gaps between the rectangles of the shadow root's children and the outer host element don't directly map to a DOM position.  
* The potential gaps between the rectangles of the shadow root's children and the outer host element don't directly map to a DOM position.  


=== host element has <code>display: transparent</code> by default, shadow root not rendered ===
=== [E] host element has <code>display: transparent</code> by default, shadow root not rendered ===


   A---------------------------------------+
   A---------------------------------------+
Line 124: Line 126:


* Containing document can't style the shadow host, but this is more apparent because of <code>display: transparent</code>. Containing document could set <code>display</code> to something different if needed.
* Containing document can't style the shadow host, but this is more apparent because of <code>display: transparent</code>. Containing document could set <code>display</code> to something different if needed.
* If <code>display</code> is set to something different it becomes case [D], with the associated issues.
* The potential gaps between the rectangles of the shadow root's children and the outer host element don't directly map to a DOM position.  
* The potential gaps between the rectangles of the shadow root's children and the outer host element don't directly map to a DOM position.  


=== host element not rendered, rendered shadow root ===
=== [F] host element not rendered, rendered shadow root ===


In this scenario, the ShadowRoot most likely is an element.
In this scenario, the ShadowRoot most likely is an element.
Line 142: Line 145:
* Containing document can't style the shadow host. Because of Isolation it also can't style the ShadowRoot, unless styles styles set on <x-foo> are forwarded somehow. If so, mechanism of style forwarding needs to be specced.
* Containing document can't style the shadow host. Because of Isolation it also can't style the ShadowRoot, unless styles styles set on <x-foo> are forwarded somehow. If so, mechanism of style forwarding needs to be specced.


=== neither host element nor shadow root rendered ===
=== [G] neither host element nor shadow root rendered ===


   A-------------------------------------+
   A-------------------------------------+

Revision as of 05:21, 4 October 2011

Overview

The question asked herein is how to best treat the following somewhat mutually exclusive requirements:

[1] The containing document "wants" to naturally style the host element (using <x-foo> notation here - see the Component Registration page for alternatives). E.g., 

 x-foo {
     background-color: yellow;
     border: 1px solid blue;
 }

[2] The component "wants" to be able to style its outermost rendering rectangle. Because of Isolation, this rectangle is ideally located within the component, i.e., within the shadow DOM.

and as a somewhat lesser concern:

[3] every point between the rectangles should correspond to a valid DOM range

Rendering

This consists of the following, more or less orthogonal, sub-questions

  • is the host element rendered or not?
  • is the shadow root rendered or not?
  • is the shadow root an element or a separate node type?
  • using display: transparent?

Almost all combinations of the above have their respective merits and problems. Assume we have the following DOM structure: 

 <A>
   <x-foo> -----> [ShadowRoot]
                 <Y/>
     <C/>            <Z/>
     <D/>
   </x-foo>
 </A>

This could conceivably be rendered in the following ways:

[A] rendered host element, rendered shadow root, shadow root is element

 A---------------------------------------------------------------------+
 |       x-foo-------------------------------------------------+       |
 |       |       SR------------------------------------+       |       |
 |       |       |       Y------+       Z------+       |       |       |
 | [A,0] |  ???  | [S,0] |      | [S,1] |      | [S,2] |  ???  | [A,1] |
 |       |       |       +------+       +------+       |       |       |
 |       |       +-------------------------------------+       |       |
 |       +-----------------------------------------------------+       |
 +---------------------------------------------------------------------+

Consequences:

  • Shadow root as element requires separate TreeScope tree and host-element pointer

Issues:

  • Styles set on <x-foo> such as background-color don't really affect the component's rendering if the component overrides them on the shadow root.
  • The potential gaps between the shadow root's rectangle and the outer host element's rectangle don't directly map to a DOM position.

[B] rendered host element with default display: transparent, rendered shadow root, shadow root is element

 A-------------------------------------------------------+
 |       x-foo - - - - - - - - - - - - - - - - - +       |
 |       :SR------------------------------------+:       |
 |       :|       Z------+       +------+       |:       |
 | [A,0] :| [S,0] |      | [S,1] |      | [S,2] |: [A,1] |
 |       :|       Z------+       +------+       |:       |
 |       :+-------------------------------------+:       |
 |       + - - - - - - - - - - - - - - - - - - - +       |
 +-------------------------------------------------------+

Consequences:

  • Shadow root as element requires separate TreeScope tree and host-element pointer

Issues:

  • Containing document can't style the shadow host, but this is more apparent because of display: transparent. Containing document could set display to something different if needed.
  • If display is set to something different it becomes case [A], with the associated issues.

[C] rendered host element, rendered shadow root, shadow root is separate node type, shadow root's rectangle always is the same as the host element's (no gap)

 A-------------------------------------------------------+
 |       x-foo-----------------------------------+       |
 |       |SR------------------------------------+|       |
 |       ||       Z------+       +------+       ||       |
 | [A,0] || [S,0] |      | [S,1] |      | [S,2] || [A,1] |
 |       ||       Z------+       +------+       ||       |
 |       |+-------------------------------------+|       |
 |       +---------------------------------------+       |
 +-------------------------------------------------------+

This allows both the document to style <x-foo>, as well as allowing the component to have its own outer rectangle, but prevents any gap from forming between them. However, this raises more questions than it answers:

Issues:

  • Need to spec how ShadowRoot node type is styleable
  • margin, padding, position et al must not apply, so need to define how styles apply to ShadowRoot in detail.

[D] rendered host element, shadow root not rendered

 A-----------------------------------------------------+
 |       x-foo---------------------------------+       |
 |       |       Y------+       Z------+       |       |
 | [A,0] |  ???  |      |  ???  |      |  ???  | [A,1] |
 |       |       +------+       +------+       |       |
 |       +-------------------------------------+       |
 +-----------------------------------------------------+

Issues:

  • Confinement requires separate style-sheet in order for the component to be able to style the host element.
  • The potential gaps between the rectangles of the shadow root's children and the outer host element don't directly map to a DOM position.

[E] host element has display: transparent by default, shadow root not rendered

 A---------------------------------------+
 |       x-foo - - - - - - - - - +       |
 |       :Y------+       Z------+:       |
 |  ???  :|      |  ???  |      |:  ???  |
 |       :+------+       +------+:       |
 |       + - - - - - - - - - - - +       |
 +---------------------------------------+

Issues:

  • Containing document can't style the shadow host, but this is more apparent because of display: transparent. Containing document could set display to something different if needed.
  • If display is set to something different it becomes case [D], with the associated issues.
  • The potential gaps between the rectangles of the shadow root's children and the outer host element don't directly map to a DOM position.

[F] host element not rendered, rendered shadow root

In this scenario, the ShadowRoot most likely is an element. 

 A-----------------------------------------------------+
 |       SR------------------------------------+       |
 |       |       Y------+       Z------+       |       |
 | [A,0] | [S,0] |      | [S,1] |      | [S,2] | [A,1] |
 |       |       +------+       +------+       |       |
 |       +-------------------------------------+       |
 +-----------------------------------------------------+

Issues:

  • Containing document can't style the shadow host. Because of Isolation it also can't style the ShadowRoot, unless styles styles set on <x-foo> are forwarded somehow. If so, mechanism of style forwarding needs to be specced.

[G] neither host element nor shadow root rendered

 A-------------------------------------+
 |       Y------+       Z------+       |
 |  ???  |      |  ???  |      |  ???  |
 |       +------+       +------+       |
 +-------------------------------------+

Undoubtedly the most flexible from a layout perspective, as it allows a single element to "create" multiple renderers.

Issues:

  • There is no single rendering rectangle corresponding to <x-foo>.
  • Containing document can't style the host element. Styles set on <x-foo> could be forwarded to ALL children of the shadow root, but it's not clear this is useful.
  • The potential gaps between the rectangles of the shadow root's children and the rectangle containing the host element don't directly map to a DOM position.
Retrieved from "https://wiki.whatwg.org/index.php?title=Component_Model_Discussion:_Rendering&oldid=7194"