Protractor Page Object with ShadowDOM example. Uses Protractor By.js - http://www.protractortest.org/#/api?view=webdriver.By.js

LoginForm.ts

import { browser, By, element, ElementFinder, ExpectedConditions as EC } from 'protractor';

class LoginModal {
    private get shadowDOM() {
        return element(By.js(function () {
            // returned value must be array
            return [document.querySelector('CSSselectorForShadowDomContainingElement').shadowRoot];
        }));
    }

    async login(user: User): Promise<void> {
        const email: ElementFinder = this.shadowDOM.$('#login_username');
        await email.sendKeys(user.email);
        const password: ElementFinder = this.shadowDOM.$('#login_password');
        await password.sendKeys(user.password);
        const loginButton: ElementFinder = this.shadowDOM.$('button[type="submit"]');
        await loginButton.click();
    }

}

export { LoginModal };

LoginForm2.ts

import { browser, By, element, ElementFinder, ExpectedConditions as EC } from 'protractor';

class LoginModal {
    private email: ElementFinder = this.shadowDOM.$('#login_username');
    private password: ElementFinder = this.shadowDOM.$('#login_password');
    private loginButton: ElementFinder = this.shadowDOM.$('button[type="submit"]');

    private get shadowDOM() {
        return element(By.js(function () {
            // returned value must be array
            return [document.querySelector('CSSselectorForShadowDomContainingElement').shadowRoot];
        }));
    }

    async login(user: User): Promise<void> {
        await this.email.sendKeys(user.email);
        await this.password.sendKeys(user.password);
        await this.loginButton.click();
    }

}

export { LoginModal };