Re: [w3c/webcomponents] Update Imperative-Shadow-DOM-Distribution-API.md (#866)

@domenic approved this pull request.

LGTM with a couple nits; thank you!

I'd like to give you write access to this repo, so that you can merge on your own after fixing those nits, but I'm not sure who has permissions to do that. Maybe @plehegar can help.

>  
 ``` webidl
-ShadowRootInit {
-   ...
-   (optional) sloting: 'manual'|'auto' //  (if omitted, it is 'auto');
-}
+dictionary ShadowRootInit {
+  required ShadowRootMode mode;
+  boolean delegatesFocus = false;
+  SlotAssignmentMode slotAssignment;   // optional. (defaults to 'auto')

```suggestion
  SlotAssignmentMode slotAssignment = "auto";
```

> +One of the drawbacks of Shadow DOM v1, when compared to Shadow DOM v0, is that web developers have to specify slot= attribute for every shadow host's children (except for elements for the *default* slot).
+ 
+#### Case 1:  Slot attributes is required in markup.
+```html
+<shadow-host>
+  <div slot=slot1></div>
+  <div slot=slot2></div>
+</shadow-host>
+ ```
+Some people would see this as a kind of *ugly* markup.
+Shadow DOM v1 can't explain how `<summary>/<details>` elements can be implemented on the top of the current Web Components technology stack, given that `<details>` element doesn't need slot= attribute.
+Blink has a special logic for some built-in elements to control node-to-slot mapping.
+ 
+#### Case 2: Slot based on condition. 
+```html
+<custom-tab show-panel=”2”>

```suggestion
<custom-tab show-panel="2">
```

>  
 ```js
-const sr = attachShadow({ mode: ..., (optional) slotting: 'manual' })
+class CustomTab extends HTMLElement {
+    constructor() {
+        super();
+        const template = `
+            <div class="custom-tab">
+                <slot></slot>
+            </div>`;
+        const shadowRoot = this.attachShadow({mode: 'open', slotAssignment: 'manual'});
+        const div = document.createElement('div');
+        div.innerHTML = template;
+        shadowRoot.appendChild(div);
+    }
+    connectedCallback() {

You might want to add a comment explaining that a production example would also use attributeChangeCallback to watch for changes to the `show-panel` attribute and re-run this code.

You could also just update the example to do that, but I'm not sure how much complexity it would add; perhaps it would be distracting.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/pull/866#pullrequestreview-393083702