Add @query, @queryAll and @customElement decorators #159
Conversation
|
Would it be worthwhile to cache the result of the Also, instead of |
src/lib/decorators.ts
Outdated
| function _query<T>(queryFn: (target: NodeSelector, selector: string) => T) { | ||
| return (selector: string) => (proto: any, propName: string) => { | ||
| Object.defineProperty(proto, propName, { | ||
| get(this: HTMLElement) { return queryFn(this.shadowRoot!, selector); }, |
There was a problem hiding this comment.
Just wondering, but shouldn't this be this.renderRoot instead of this.shadowRoot in case someone overrides createRenderRoot() to return something else?
src/lib/decorators.ts
Outdated
| * | ||
| * @param tagName The name of the custom element to define. | ||
| */ | ||
| export const customElement = (tagName: string) => (clazz: any) => { |
There was a problem hiding this comment.
Have you considered how this will extend to scoped custom element registries?
There was a problem hiding this comment.
Not very thoroughly, but this is basically the same as a customElements.define() statement in the module. That will define on the global registry, and redefinitions of the tag name in scoped registries should be ok.
src/lib/decorators.ts
Outdated
| /** | ||
| * Class decorator factory that defines the decorated class as a custom element. | ||
| * | ||
| * @param tagName The name of the custom element to define. |
There was a problem hiding this comment.
Remove capitalization and period.
src/lib/decorators.ts
Outdated
| (clazz: Constructor<HTMLElement>) => { | ||
| window.customElements.define(tagName, clazz); | ||
| // Cast as any | ||
| return clazz as any; |
src/test/lib/decorators_test.ts
Outdated
| test('returns an element when it exists', async () => { | ||
| const c = new C(); | ||
| container.appendChild(c); | ||
| await Promise.resolve(); |
There was a problem hiding this comment.
await c.updateComplete...
+ a few other places below
src/test/lib/decorators_test.ts
Outdated
|
|
||
| suite('@customElement', () => { | ||
| test('defines an element', () => { | ||
| @customElement('lit-element-test-1' as keyof HTMLElementTagNameMap) |
There was a problem hiding this comment.
Use generateElementName to ensure uniqueness of element name... in all tests that define elements.
justinfagnani
force-pushed
the
query
branch
from
03ae7d4
to
e38b0c3
Compare
|
@sorvell PTAL |
Fixes #158