Skip to content

Commit 4a72a78

Browse files
ExE-BossTimothyGu
andcommitted
Update README.md
Co-authored-by: Timothy Gu <timothygu99@gmail.com>
1 parent 383e2e2 commit 4a72a78

File tree

1 file changed

+22
-19
lines changed

1 file changed

+22
-19
lines changed

README.md

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,33 @@ This package exposes two flavors of the `CSSStyleDeclaration` interface dependin
1818

1919
### `cssstyle` module
2020

21-
This module default-exports the `CSSStyleDeclaration` interface constructor, with the change that it can be constructed and takes an `onChangeCallback` optional parameter:
22-
23-
```ts
24-
export = class CSSStyleDeclaration {
25-
/**
26-
* @param onChangeCallback The callback that is invoked whenever a property changes.
27-
*/
28-
constructor(onChangeCallback?: ((cssText: string) => void) | null);
21+
This module default-exports the `CSSStyleDeclaration` interface constructor, with the change that it can be constructed with an optional `onChangeCallback` parameter. Whenever any CSS property is modified through an instance of this class, the callback (if provided) will be called with a string that represents all CSS properties of this element, serialized. This allows the embedding environment to properly reflect the style changes to an element's `style` attribute.
22+
23+
Here is a crude example of using the `onChangeCallback` to implement the `style` property of `HTMLElement`:
24+
```js
25+
const CSSStyleDeclaration = require('cssstyle');
26+
27+
class HTMLElement extends Element {
28+
constructor() {
29+
this._style = new CSSStyleDeclaration(newCSSText => {
30+
this.setAttributeNS(null, "style", newCSSText);
31+
});
32+
}
33+
34+
get style() {
35+
return this._style;
36+
}
37+
38+
set style(text) {
39+
this._style.cssText = text;
40+
}
2941
}
3042
```
3143

3244
### `cssstyle/webidl2js-wrapper` module
3345

34-
This module exports the `CSSStyleDeclaration` [interface wrapper API](https://github.com/jsdom/webidl2js#for-interfaces) generated by [webidl2js](https://github.com/jsdom/webidl2js).
46+
This module exports the `CSSStyleDeclaration` [interface wrapper API](https://github.com/jsdom/webidl2js#for-interfaces) generated by [webidl2js](https://github.com/jsdom/webidl2js). Unlike the default export, `CSSStyleDeclaration` constructors installed by the webidl2js wrapper do _not_ support construction, just like how they actually are in browsers. Creating new `CSSStyleDeclaration` objects can be done with the [`create`](https://github.com/jsdom/webidl2js#createglobalobject-constructorargs-privatedata) method of the wrapper.
3547

3648
#### `privateData`
3749

38-
The `privateData` argument takes the following properties:
39-
40-
```ts
41-
interface CSSStyleDeclarationPrivateData {
42-
/**
43-
* The callback that is invoked whenever a property changes.
44-
*/
45-
onChangeCallback?: ((cssText: string) => void) | null
46-
}
47-
```
50+
The `privateData` parameter of `create` and `createImpl` provides a way to specify the `onChangeCallback` that is a constructor parameter in the default export. Only the `onChangeCallback` property is supported on `privateData` currently, with the same semantics as the constructor parameter documented above.

0 commit comments

Comments
 (0)