diff --git a/packages/field/src/FormControlMixin.js b/packages/field/src/FormControlMixin.js index 1fd94e8ca..eef955a7f 100644 --- a/packages/field/src/FormControlMixin.js +++ b/packages/field/src/FormControlMixin.js @@ -54,11 +54,7 @@ export const FormControlMixin = dedupeMixin( } get label() { - return ( - (this.querySelector('[slot="label"]') && - this.querySelector('[slot="label"]').textContent) || - this.__label - ); + return (this._labelNode && this._labelNode.textContent) || this.__label; } set label(newValue) { @@ -68,11 +64,7 @@ export const FormControlMixin = dedupeMixin( } get helpText() { - return ( - (this.querySelector('[slot="help-text"]') && - this.querySelector('[slot="help-text"]').textContent) || - this.__helpText - ); + return (this._helpTextNode && this._helpTextNode.textContent) || this.__helpText; } set helpText(newValue) { diff --git a/packages/field/test/FormControlMixin.test.js b/packages/field/test/FormControlMixin.test.js index 0325865c7..e6ea3d795 100644 --- a/packages/field/test/FormControlMixin.test.js +++ b/packages/field/test/FormControlMixin.test.js @@ -53,6 +53,16 @@ describe('FormControlMixin', () => { expect(el.label).to.equal('Email address'); }); + it('only takes label of direct child', async () => { + const el = await fixture(html` + <${tag}> + <${tag} label="Email address"> + ${inputSlot} + ${tag}> + ${tag}>`); + expect(el.label).to.equal(undefined); + }); + it('can have a help-text', async () => { const elAttr = await fixture(html` <${tag} help-text="We will not send you any spam">${inputSlot}${tag}> @@ -68,7 +78,7 @@ describe('FormControlMixin', () => { const elElem = await fixture(html` <${tag}> - +