How can we use a Patternfly element inside of a custom Lit element? #2071

codyburleson · 2022-07-27T00:45:32Z

codyburleson
Jul 27, 2022

I can't seem to get any Patternfly Elements working within my own custom Lit element.

As per the instructions, I've installed, for example, pfe-card using:

npm install @patternfly/pfe-card

I imported in my custom Lit element as follows:

import '@patternfly/pfe-card'

Then I just render using the tag like so...

  override render() {
    return html`
      <pfe-card>
        <h2 slot="header">Card header</h2>
        <p>This is the pfe-card body.</p>
        <p slot="footer">This is the footer</p>
      </pfe-card>
      `;
  }

This is what it renders (missing the header and footer slots):

I have a similar issues rendering a modal. It renders the HTML that it recognizes, but I don't think the component is actually there. It's just rendering what's in the html tags...

  override render() {
    return html`
      <hr/>
      <pfe-modal trigger="usage-trigger">
      <h2 slot="header">Modal with a header</h2>
      <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <pfe-cta>
        <a href="#bar">Learn more</a>
      </pfe-cta>
      </pfe-modal>
      <button id="usage-trigger">Open modal</button>
      <hr/>
      `;
  }

I don't know what I'm doing wrong. I'm just going by what's documented. Anybody got any tips?

Answered by bennypowers

Jul 27, 2022

Can you show me your package.json?

Also do try

npm i @patternfly/pfe-card@next

Do you get any typescript errors? Any browser console errors or output? When you inspect the pfe-card element, does it have a shadowroot?

View full answer

bennypowers · 2022-07-27T08:14:39Z

bennypowers
Jul 27, 2022
Maintainer

Can you show me your package.json?

Also do try

npm i @patternfly/pfe-card@next

Do you get any typescript errors? Any browser console errors or output? When you inspect the pfe-card element, does it have a shadowroot?

4 replies

codyburleson Jul 27, 2022
Author

Sure. Here is my package.json...

{
  "name": "@lit/lit-starter-ts",
  "private": true,
  "version": "1.0.4",
  "description": "A simple web component",
  "main": "my-element.js",
  "module": "my-element.js",
  "type": "module",
  "scripts": {
    "build": "tsc",
    "build:watch": "tsc --watch",
    "clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
    "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
    "lint:eslint": "eslint 'src/**/*.ts'",
    "lint:lit-analyzer": "lit-analyzer",
    "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
    "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
    "docs:clean": "rimraf docs",
    "docs:gen": "eleventy --config=.eleventy.cjs",
    "docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
    "docs:build": "rollup -c --file docs/my-element.bundled.js",
    "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
    "docs:serve": "wds --root-dir=docs --node-resolve --watch",
    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
    "serve": "wds --watch",
    "serve:prod": "MODE=prod npm run serve",
    "test": "npm run test:dev && npm run test:prod",
    "test:dev": "wtr",
    "test:watch": "wtr --watch",
    "test:prod": "MODE=prod wtr",
    "test:prod:watch": "MODE=prod wtr --watch",
    "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
  },
  "keywords": [
    "web-components",
    "lit-element",
    "typescript",
    "lit"
  ],
  "author": "Google LLC",
  "license": "BSD-3-Clause",
  "dependencies": {
    "@patternfly/pfe-card": "^1.12.3",
    "@patternfly/pfe-modal": "^1.12.3",
    "@patternfly/pfe-styles": "^1.12.3",
    "lit": "^2.2.4"
  },
  "devDependencies": {
    "@11ty/eleventy": "^1.0.1",
    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
    "@custom-elements-manifest/analyzer": "^0.6.3",
    "@open-wc/testing": "^3.1.5",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-replace": "^4.0.0",
    "@typescript-eslint/eslint-plugin": "^5.25.0",
    "@typescript-eslint/parser": "^5.25.0",
    "@web/dev-server": "^0.1.31",
    "@web/dev-server-legacy": "^1.0.0",
    "@web/test-runner": "^0.13.27",
    "@web/test-runner-playwright": "^0.8.8",
    "@webcomponents/webcomponentsjs": "^2.6.0",
    "eslint": "^8.15.0",
    "lit-analyzer": "^1.2.1",
    "prettier": "^2.6.2",
    "rimraf": "^3.0.2",
    "rollup": "^2.73.0",
    "rollup-plugin-summary": "^1.4.3",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "~4.7.4"
  },
  "customElements": "custom-elements.json"
}

codyburleson Jul 27, 2022
Author

As per your suggestion, I ran the npm i @patternfly/pfe-card@next (also did that for npm i @patternfly/pfe-modal@next) and both elements now work and have a shadow DOM when used within my custom Lit element.

I'll mark that as the answer; thank you! Although, I think the documentation might ought to reflect something to that effect?

And here is my new package.json...

{
  "name": "@lit/lit-starter-ts",
  "private": true,
  "version": "1.0.4",
  "description": "A simple web component",
  "main": "my-element.js",
  "module": "my-element.js",
  "type": "module",
  "scripts": {
    "build": "tsc",
    "build:watch": "tsc --watch",
    "clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
    "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
    "lint:eslint": "eslint 'src/**/*.ts'",
    "lint:lit-analyzer": "lit-analyzer",
    "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
    "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
    "docs:clean": "rimraf docs",
    "docs:gen": "eleventy --config=.eleventy.cjs",
    "docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
    "docs:build": "rollup -c --file docs/my-element.bundled.js",
    "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
    "docs:serve": "wds --root-dir=docs --node-resolve --watch",
    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
    "serve": "wds --watch",
    "serve:prod": "MODE=prod npm run serve",
    "test": "npm run test:dev && npm run test:prod",
    "test:dev": "wtr",
    "test:watch": "wtr --watch",
    "test:prod": "MODE=prod wtr",
    "test:prod:watch": "MODE=prod wtr --watch",
    "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
  },
  "keywords": [
    "web-components",
    "lit-element",
    "typescript",
    "lit"
  ],
  "author": "Google LLC",
  "license": "BSD-3-Clause",
  "dependencies": {
    "@patternfly/pfe-card": "^2.0.0-next.4",
    "@patternfly/pfe-modal": "^2.0.0-next.4",
    "lit": "^2.2.4"
  },
  "devDependencies": {
    "@11ty/eleventy": "^1.0.1",
    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
    "@custom-elements-manifest/analyzer": "^0.6.3",
    "@open-wc/testing": "^3.1.5",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-replace": "^4.0.0",
    "@typescript-eslint/eslint-plugin": "^5.25.0",
    "@typescript-eslint/parser": "^5.25.0",
    "@web/dev-server": "^0.1.31",
    "@web/dev-server-legacy": "^1.0.0",
    "@web/test-runner": "^0.13.27",
    "@web/test-runner-playwright": "^0.8.8",
    "@webcomponents/webcomponentsjs": "^2.6.0",
    "eslint": "^8.15.0",
    "lit-analyzer": "^1.2.1",
    "prettier": "^2.6.2",
    "rimraf": "^3.0.2",
    "rollup": "^2.73.0",
    "rollup-plugin-summary": "^1.4.3",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "~4.7.4"
  },
  "customElements": "custom-elements.json"
}

bennypowers Jul 28, 2022
Maintainer

I'll mark that as the answer; thank you! Although, I think the documentation might ought to reflect something to that effect?

Thanks. We are in the middle of a transition in PFE,

but I'll draft a PR which adds the next dist tag to our site instructions

bennypowers Jul 28, 2022
Maintainer

This was addressed in #2074

https://patternflyelements.org/ now (when cache clears) points users to install the next dist tag

Thank you for bringing this to our attention

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can we use a Patternfly element inside of a custom Lit element? #2071

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

How can we use a Patternfly element inside of a custom Lit element? #2071

codyburleson Jul 27, 2022

Replies: 1 comment · 4 replies

bennypowers Jul 27, 2022 Maintainer

codyburleson Jul 27, 2022 Author

codyburleson Jul 27, 2022 Author

bennypowers Jul 28, 2022 Maintainer

bennypowers Jul 28, 2022 Maintainer

codyburleson
Jul 27, 2022

Replies: 1 comment 4 replies

bennypowers
Jul 27, 2022
Maintainer

codyburleson Jul 27, 2022
Author

codyburleson Jul 27, 2022
Author

bennypowers Jul 28, 2022
Maintainer

bennypowers Jul 28, 2022
Maintainer