Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update DOM-Parts (Imperative) to clarify definitions and use cases #1032

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions proposals/DOM-Parts-Imperative.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ interface AttributePart : Part {
readonly attribute DOMString namespaceURI;
};

interface ChildNodePart : Part {
constructor(Node node, Node? previousSibling, Node? nextSibling);
interface ChildNodePart : NodePart {
constructor(Node parentNode, Node? previousSibling, Node? nextSibling);
readonly attribute Node? previousSibling;
readonly attribute Node? nextSibling;
};
Expand Down Expand Up @@ -54,6 +54,10 @@ In the most basic level, this proposal consists of three DOM parts:
[child](https://dom.spec.whatwg.org/#concept-tree-child)
[nodes](https://dom.spec.whatwg.org/#concept-node) of a node which can be
[replaced](https://dom.spec.whatwg.org/#concept-node-replace).
1. Can represent the entire range within a parent node (when previousSibling
and nextSibling are missing), the range from a node to the end of an
element (when nextSibling is missing), or all nodes up to an element
(when previousSibling is missing).

### Basic Examples

Expand Down Expand Up @@ -112,6 +116,16 @@ The resultant DOM will look like this:
</section>
```

A `NodePart` can be used to add event listeners or other dynamically set attributes.

```js
const link = staticContent.getElementById("link");
const nodePart = new NodePart(link);
/// ... some code later
nodePart.node.addEventListener('click', () => {});
nodePart.setAttribute('data-foo', someValue);
```

## Part Groups

DOM parts need grouping and ownership to provide batching and to enable parts
Expand Down