diff --git a/.changeset/heavy-melons-walk.md b/.changeset/heavy-melons-walk.md
new file mode 100644
index 0000000000..e763914421
--- /dev/null
+++ b/.changeset/heavy-melons-walk.md
@@ -0,0 +1,7 @@
+---
+'lit-element': patch
+'lit-html': patch
+'@lit/reactive-element': patch
+---
+
+Remove unneeded `matches` support in @queryAssignedNodes. Update styling tests to use static bindings where needed. Fix TODOs related to doc links.
diff --git a/packages/internal-scripts/package-lock.json b/packages/internal-scripts/package-lock.json
index 3a450faba0..7ebd630d01 100644
--- a/packages/internal-scripts/package-lock.json
+++ b/packages/internal-scripts/package-lock.json
@@ -5,7 +5,6 @@
"requires": true,
"packages": {
"": {
- "name": "internal-scripts",
"version": "1.0.0",
"license": "BSD-3-Clause",
"dependencies": {
diff --git a/packages/lit-element/package-lock.json b/packages/lit-element/package-lock.json
index 123374e966..bda7398bc4 100644
--- a/packages/lit-element/package-lock.json
+++ b/packages/lit-element/package-lock.json
@@ -5,7 +5,6 @@
"requires": true,
"packages": {
"": {
- "name": "lit-element",
"version": "3.0.0-rc.3",
"license": "BSD-3-Clause",
"devDependencies": {
diff --git a/packages/lit-element/src/index.ts b/packages/lit-element/src/index.ts
index 6247627f9d..aaf7a7de81 100644
--- a/packages/lit-element/src/index.ts
+++ b/packages/lit-element/src/index.ts
@@ -9,9 +9,8 @@ export * from 'lit-html';
export * from './lit-element.js';
export * from './decorators.js';
-// TODO: link to docs on the new site
console.warn(
"The main 'lit-element' module entrypoint is deprecated. Please update " +
"your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' " +
- "or import from 'lit-element/lit-element.ts'."
+ "or import from 'lit-element/lit-element.ts'. See https://lit.dev/docs/releases/upgrade/#update-packages-and-import-paths for more information."
);
diff --git a/packages/lit-element/src/lit-element.ts b/packages/lit-element/src/lit-element.ts
index 954c8f4ce3..130a1d05f0 100644
--- a/packages/lit-element/src/lit-element.ts
+++ b/packages/lit-element/src/lit-element.ts
@@ -171,9 +171,9 @@ if (DEV_MODE) {
if (obj[name] !== undefined) {
console.warn(
`\`${name}\` is implemented. It ` +
- `has been removed from this version of LitElement. `
- // TODO(sorvell): add link to changelog when location has stabilized.
- // + See the changelog at https://github.com/lit/lit/blob/main/packages/lit-element/CHANGELOG.md`
+ `has been removed from this version of LitElement. See ` +
+ `https://lit.dev/docs/releases/upgrade/#litelement ` +
+ `for more information.`
);
}
};
diff --git a/packages/lit-element/src/test/lit-element_styling_test.ts b/packages/lit-element/src/test/lit-element_styling_test.ts
index 0b2f5015d1..2016c7eca3 100644
--- a/packages/lit-element/src/test/lit-element_styling_test.ts
+++ b/packages/lit-element/src/test/lit-element_styling_test.ts
@@ -4,6 +4,7 @@
* SPDX-License-Identifier: BSD-3-Clause
*/
import {css, html as htmlWithStyles, LitElement} from '../lit-element.js';
+import {html as staticHtml, unsafeStatic} from 'lit-html/static.js';
import {
canTestLitElement,
@@ -334,19 +335,17 @@ import {assert} from '@esm-bundle/chai';
}
});
- // TODO(sorvell): Bindings in styles are no longer supported.
- // This will be supported via static bindings only.
- test.skip('properties in styles render with initial value and cannot be changed', async () => {
+ test('static properties in styles render with initial value and cannot be changed', async () => {
let border = `6px solid blue`;
const name = generateElementName();
customElements.define(
name,
class extends LitElement {
override render() {
- return htmlWithStyles`
+ return staticHtml`
Testing...
`;
@@ -356,7 +355,7 @@ import {assert} from '@esm-bundle/chai';
const el = document.createElement(name) as LitElement;
container.appendChild(el);
await el.updateComplete;
- const div = el.shadowRoot!.querySelector('div');
+ let div = el.shadowRoot!.querySelector('div');
assert.equal(
getComputedStyleValue(div!, 'border-top-width').trim(),
'6px'
@@ -364,6 +363,7 @@ import {assert} from '@esm-bundle/chai';
border = `4px solid orange`;
el.requestUpdate();
await el.updateComplete;
+ div = el.shadowRoot!.querySelector('div');
assert.equal(
getComputedStyleValue(div!, 'border-top-width').trim(),
'6px'
diff --git a/packages/lit-html/package-lock.json b/packages/lit-html/package-lock.json
index b510ac8856..d4e3644e7b 100644
--- a/packages/lit-html/package-lock.json
+++ b/packages/lit-html/package-lock.json
@@ -5,7 +5,6 @@
"requires": true,
"packages": {
"": {
- "name": "lit-html",
"version": "2.0.0-rc.4",
"license": "BSD-3-Clause",
"dependencies": {
diff --git a/packages/lit-html/src/test/polyfill-support/lit-html_html-test.ts b/packages/lit-html/src/test/polyfill-support/lit-html_html-test.ts
index 6fd9d02517..30bc026e81 100644
--- a/packages/lit-html/src/test/polyfill-support/lit-html_html-test.ts
+++ b/packages/lit-html/src/test/polyfill-support/lit-html_html-test.ts
@@ -10,6 +10,7 @@ import {repeat} from '../../directives/repeat.js';
import {cache} from '../../directives/cache.js';
import {assert} from '@esm-bundle/chai';
import {renderShadowRoot, wrap, shadowRoot} from '../test-utils/shadow-root.js';
+import {html as staticHtml, unsafeStatic} from '../../static.js';
import '../lit-html_test.js';
// selected directive tests
@@ -387,8 +388,7 @@ suite('polyfill-support rendering', () => {
wrap(document.body).removeChild(container2);
});
- // TODO(sorvell): This will only be supported via static bindings.
- test.skip('part values render into styles once per scope', function () {
+ test('static part values render into styles once per scope', function () {
if (typeof window.ShadyDOM === 'undefined' || !window.ShadyDOM.inUse) {
this.skip();
return;
@@ -396,10 +396,10 @@ suite('polyfill-support rendering', () => {
const container = document.createElement('scope-3');
wrap(document.body).appendChild(container);
const renderTemplate = (border: string) => {
- const result = html`
+ const result = staticHtml`
Testing...
@@ -407,12 +407,13 @@ suite('polyfill-support rendering', () => {
renderShadowRoot(result, container);
};
renderTemplate('1px solid black');
- const div = shadowRoot(container)!.querySelector('div');
+ let div = shadowRoot(container)!.querySelector('div');
assert.equal(
getComputedStyle(div!).getPropertyValue('border-top-width').trim(),
'1px'
);
renderTemplate('2px solid black');
+ div = shadowRoot(container)!.querySelector('div');
assert.equal(
getComputedStyle(div!).getPropertyValue('border-top-width').trim(),
'1px'
diff --git a/packages/lit/package-lock.json b/packages/lit/package-lock.json
index 12514b5b4d..20737294ad 100644
--- a/packages/lit/package-lock.json
+++ b/packages/lit/package-lock.json
@@ -5,7 +5,6 @@
"requires": true,
"packages": {
"": {
- "name": "lit",
"version": "2.0.0-rc.3",
"license": "BSD-3-Clause",
"devDependencies": {
diff --git a/packages/reactive-element/src/decorators/query-assigned-nodes.ts b/packages/reactive-element/src/decorators/query-assigned-nodes.ts
index 8b76ef8699..fb9713000f 100644
--- a/packages/reactive-element/src/decorators/query-assigned-nodes.ts
+++ b/packages/reactive-element/src/decorators/query-assigned-nodes.ts
@@ -14,13 +14,6 @@
import {ReactiveElement} from '../reactive-element.js';
import {decorateProperty} from './base.js';
-// TODO(sorvell): Remove when https://github.com/webcomponents/polyfills/issues/397 is addressed.
-// x-browser support for matches
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ElementProto = Element.prototype as any;
-const legacyMatches =
- ElementProto.msMatchesSelector || ElementProto.webkitMatchesSelector;
-
/**
* A property decorator that converts a class property into a getter that
* returns the `assignedNodes` of the given named `slot`. Note, the type of
@@ -64,10 +57,7 @@ export function queryAssignedNodes(
nodes = nodes.filter(
(node) =>
node.nodeType === Node.ELEMENT_NODE &&
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- ((node as any).matches
- ? (node as Element).matches(selector)
- : legacyMatches.call(node as Element, selector))
+ (node as Element).matches(selector)
);
}
return nodes;
diff --git a/packages/reactive-element/src/reactive-element.ts b/packages/reactive-element/src/reactive-element.ts
index 1d5d556fed..e3591c8275 100644
--- a/packages/reactive-element/src/reactive-element.ts
+++ b/packages/reactive-element/src/reactive-element.ts
@@ -1053,7 +1053,6 @@ export abstract class ReactiveElement
}
);
if (shadowedProperties.length) {
- // TODO(sorvell): Link to docs explanation of this issue.
console.warn(
`The following properties will not trigger updates as expected ` +
`because they are set using class fields: ` +
@@ -1062,7 +1061,10 @@ export abstract class ReactiveElement
`accessors used for detecting changes. To fix this issue, ` +
`either initialize properties in the constructor or adjust ` +
`your compiler settings; for example, for TypeScript set ` +
- `\`useDefineForClassFields: false\` in your \`tsconfig.json\`.`
+ `\`useDefineForClassFields: false\` in your \`tsconfig.json\`.` +
+ `See https://lit.dev/docs/components/properties/#declare and ` +
+ `https://lit.dev/docs/components/decorators/` +
+ `#avoiding-issues-with-class-fields for more information.`
);
}
}
diff --git a/packages/reactive-element/src/test/decorators/queryAssignedNodes_test.ts b/packages/reactive-element/src/test/decorators/queryAssignedNodes_test.ts
index ad4ddb2325..f024051d7c 100644
--- a/packages/reactive-element/src/test/decorators/queryAssignedNodes_test.ts
+++ b/packages/reactive-element/src/test/decorators/queryAssignedNodes_test.ts
@@ -198,15 +198,7 @@ const flush =
assert.deepEqual(el.assignedNodesEl.footerAssignedItems, []);
});
- test('returns assignedNodes for slot that contains text nodes filtered by selector when Element.matches does not exist', () => {
- const descriptor = Object.getOwnPropertyDescriptor(
- Element.prototype,
- 'matches'
- );
- Object.defineProperty(Element.prototype, 'matches', {
- value: undefined,
- configurable: true,
- });
+ test('returns assignedNodes for slot that contains text nodes filtered by selector', () => {
assert.deepEqual(el.assignedNodesEl.footerAssignedItems, []);
const child1 = document.createElement('div');
const child2 = document.createElement('div');
@@ -222,9 +214,6 @@ const flush =
el.removeChild(child2);
flush();
assert.deepEqual(el.assignedNodesEl.footerAssignedItems, []);
- if (descriptor !== undefined) {
- Object.defineProperty(Element.prototype, 'matches', descriptor);
- }
});
test('always returns an array, even if the slot is not rendered', () => {
diff --git a/packages/tests/package-lock.json b/packages/tests/package-lock.json
index adc14374ea..a2aec10953 100644
--- a/packages/tests/package-lock.json
+++ b/packages/tests/package-lock.json
@@ -5,7 +5,6 @@
"requires": true,
"packages": {
"": {
- "name": "tests",
"version": "0.0.0",
"devDependencies": {
"@web/dev-server-legacy": "^0.1.7",