mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
4b658ce8a6
* [polymer] Expose polymer.PolymerElement type in Polymer 1.x typings.
This is a type that represents a Polymer element after its class has been constructed by the Polymer() function.
Previously people would construct such a type by doing:
```typescript
interface MyElement extends HTMLElement, polymer.Base {}
```
But after TypeScript 3.0, the type of `HTMLElement#toggleAttribute` is different than the type of `polymer.Base#toggleAttribute`, which makes it an error to declare the MyElement type as above.
Unfortunately, we can't change the type of toggleElement on polymer.Base, so instead we introduce a new type polymer.PolymerElement that already extends `HTMLElement`.
So after this change, a Polymer 1.0 user can write their type as:
```typescript
interface MyElement extends polymer.PolymerElement {}
```
* Fix a couple of small issues.
100 lines
2.1 KiB
TypeScript
100 lines
2.1 KiB
TypeScript
Polymer({
|
|
is: "my-element",
|
|
|
|
behaviors: [Polymer.Templatizer],
|
|
|
|
properties: {
|
|
prop1: String,
|
|
prop2: {
|
|
type: Boolean,
|
|
value: true,
|
|
readOnly: false,
|
|
reflectToAttribute: true,
|
|
notify: true,
|
|
computed: "__prop2()"
|
|
},
|
|
prop3: {
|
|
type: Object,
|
|
value: { "foo": "bar" },
|
|
},
|
|
},
|
|
|
|
hostAttributes: {
|
|
"string-attribute": 'Value',
|
|
"boolean-attribute": true,
|
|
tabindex: 0
|
|
},
|
|
|
|
ready: function () {
|
|
const template = Polymer.dom(this).querySelector('template');
|
|
if (template) {
|
|
this.templatize(template);
|
|
const instance = this.stamp({item: {}});
|
|
}
|
|
this.textContent = 'My element!';
|
|
this.$.name.textContent = this.name;
|
|
this.serialize({});
|
|
this.async(function () {
|
|
// access sibling or parent elements here
|
|
});
|
|
},
|
|
|
|
__prop2: function () {
|
|
var toLight = document.createElement('div');
|
|
Polymer.dom(this).appendChild(toLight);
|
|
|
|
var toLocal = document.createElement('div');
|
|
var beforeNode = Polymer.dom(this.root).childNodes[0];
|
|
Polymer.dom(this.root).insertBefore(toLocal, beforeNode);
|
|
|
|
var allSpans = Polymer.dom(this).querySelectorAll('span');
|
|
}
|
|
});
|
|
|
|
var MyElement = Polymer.Class({
|
|
is: 'my-element',
|
|
|
|
created: function () {
|
|
this.textContent = 'My element!';
|
|
}
|
|
|
|
} as polymer.Base);
|
|
|
|
document.registerElement('my-element', MyElement);
|
|
|
|
// Equivalent:
|
|
var el1 = new MyElement();
|
|
var el2 = document.createElement('my-element');
|
|
|
|
// ES6 class syntax
|
|
|
|
// implicit implementation
|
|
class MyElement2 {
|
|
is: string;
|
|
|
|
beforeRegister() {
|
|
this.is = "my-element2";
|
|
}
|
|
}
|
|
|
|
Polymer(MyElement2);
|
|
|
|
// explicit implementation
|
|
class MyElement3 implements polymer.Base {
|
|
is: string;
|
|
|
|
beforeRegister() {
|
|
this.is = "my-element3";
|
|
}
|
|
}
|
|
|
|
Polymer(MyElement3);
|
|
|
|
// Test splice computation
|
|
const splices: polymer.PolymerSplice[] = Polymer.ArraySplice.calculateSplices(
|
|
[1,2,3], [1,2]);
|
|
|
|
// Test that readonly arrays also work.
|
|
const splices2: polymer.PolymerSplice[] = Polymer.ArraySplice.calculateSplices(
|
|
Object.freeze([1,2,3]), Object.freeze([1,2]));
|