feat(lightning-element): expose hostElement property

packages/@lwc/engine-core/src/framework/base-lightning-element.ts

@@ -24,6 +24,7 @@ import {
     isFunction,
     isNull,
     isObject,
+    isFalse,
     isUndefined,
     KEY__SYNTHETIC_MODE,
     keys,
@@ -194,6 +195,7 @@ export interface LightningElement extends HTMLElementTheGoodParts, AccessibleEle
     constructor: LightningElementConstructor;
     template: ShadowRoot | null;
     refs: RefNodes | undefined;
+    elementSelf: Element;
     render(): Template;
     connectedCallback?(): void;
     disconnectedCallback?(): void;
@@ -542,6 +544,18 @@ function warnIfInvokedDuringConstruction(vm: VM, methodOrPropName: string) {
         return vm.shadowRoot;
     },
 
+    get elementSelf(): Element {
+        const vm = getAssociatedVM(this);
+
+        if (process.env.NODE_ENV !== 'production') {
+            if (isFalse(vm.elm instanceof Element)) {
+                logError(`this.elementSelf should be an Element, found: ${vm.elm}`);
+            }
+        }
+
+        return vm.elm;
+    },
+
     get refs(): RefNodes | undefined {
         const vm = getAssociatedVM(this);
 

packages/@lwc/integration-karma/test/component/LightningElement.elementSelf/index.spec.js

@@ -0,0 +1,39 @@
+import { createElement } from 'lwc';
+
+import Wrapper from 'x/wrapper';
+
+function createWrapper() {
+    const elm = createElement('x-wrapper', { is: Wrapper });
+    document.body.appendChild(elm);
+    return elm;
+}
+
+it('should provide the root element for light rendering', () => {
+    const elm = createWrapper();
+
+    const divElement = elm.getDivElement();
+    const lightElement = elm.getLightElement();
+    const elementSelf = lightElement.getHostElement();
+
+    expect(elementSelf).toBeTruthy();
+    expect(elementSelf.tagName).toEqual('X-LIGHT');
+    expect(elementSelf.dataset.name).toEqual('lightElement');
+
+    expect(elementSelf).toEqual(lightElement);
+    expect(elementSelf.parentElement).toEqual(divElement);
+});
+
+it('should provide the root element for shadow rendering', () => {
+    const elm = createWrapper();
+
+    const divElement = elm.getDivElement();
+    const shadowElement = elm.getShadowElement();
+    const elementSelf = shadowElement.getHostElement();
+
+    expect(elementSelf).toBeTruthy();
+    expect(elementSelf.tagName).toEqual('X-SHADOW');
+    expect(elementSelf.dataset.name).toEqual('shadowElement');
+
+    expect(elementSelf).toEqual(shadowElement);
+    expect(elementSelf.parentElement).toEqual(divElement);
+});

packages/@lwc/integration-karma/test/component/LightningElement.elementSelf/x/light/light.html

@@ -0,0 +1 @@
+<template lwc:render-mode="light"></template>

packages/@lwc/integration-karma/test/component/LightningElement.elementSelf/x/light/light.js

@@ -0,0 +1,10 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Light extends LightningElement {
+    static renderMode = 'light';
+
+    @api
+    getHostElement() {
+        return this.elementSelf;
+    }
+}

packages/@lwc/integration-karma/test/component/LightningElement.elementSelf/x/shadow/shadow.js

@@ -0,0 +1,8 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Shadow extends LightningElement {
+    @api
+    getHostElement() {
+        return this.elementSelf;
+    }
+}

packages/@lwc/integration-karma/test/component/LightningElement.elementSelf/x/wrapper/wrapper.html

@@ -0,0 +1,6 @@
+<template>
+    <div data-name="divElement" lwc:ref="div">
+        <x-light data-name="lightElement" lwc:ref="light"></x-light>
+        <x-shadow data-name="shadowElement" lwc:ref="shadow"></x-shadow>
+    </div>
+</template>

packages/@lwc/integration-karma/test/component/LightningElement.elementSelf/x/wrapper/wrapper.js

@@ -0,0 +1,18 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Wrapper extends LightningElement {
+    @api
+    getDivElement() {
+        return this.refs.div;
+    }
+
+    @api
+    getLightElement() {
+        return this.refs.light;
+    }
+
+    @api
+    getShadowElement() {
+        return this.refs.shadow;
+    }
+}

packages/@lwc/integration-karma/test/component/properties/index.spec.js

@@ -14,6 +14,7 @@ const expectedEnumerableProps = [
     'dir',
     'dispatchEvent',
     'draggable',
+    'elementSelf',
     'firstChild',
     'firstElementChild',
     'getAttribute',