[Notes] New in Chrome 66

original

CSS Typed Object Model

Using the CSS object model, everything returned is a string

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

style can now be accessed using .attributeStyleMapproperty overrides . .styleMapIt returns a map-like object that makes reading and writing easier.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!  返回了正确的数据类型了

And performance has also improved

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Async Clipboard API

const successful = document.execCommand('copy');

Using document.execCommandsynchronous copy & pasting of small pieces of text is not a problem, but if the text is large, it can block the page.

66 provides new asynchronous replication APIs.

Call writeText()to copy text into the pasteboard.

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Because this API is asynchronous, it writeText()returns a Promise.

Similarly, you can use getText()to read the text in the pasteboard, wait until it returns a Promise, and then resolve the text.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

other

• TextAreaand attributes Selectare now supported .autocomplete
• Settings in a form element are autocapitalizeautomatically applied to all of its child form elements.
• trimStart()and trimEnd()is used to remove whitespace at the leading and trailing ends of the string.