search

lit / lit-element

LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
https://lit-element.polymer-project.org
BSD 3-Clause "New" or "Revised" License
4.49k stars 319 forks source link

failed to convert value to cssstylesheet #715

Closed BhavyaSingh2611 closed 4 years ago

BhavyaSingh2611 commented 5 years ago

Description

Uncaught TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'. at HTMLElement.adoptStyles (aim-design.js:9) at HTMLElement.initialize (aim-design.js:9) at new rt (aim-design.js:9) at new Et (aim-design.js:9) at new s (aim-design.js:2)

Live Demo

https://www.github.com/BhavyaSingh2611/aim-design

Steps to Reproduce

bundle assets using npm run build open a.html view console error is there the custom element is also not rendering

Expected Results

show a material design styled button with absd written in it

Actual Results

plain absd is shown (text)

Browsers Affected

Versions

luis-pato commented 5 years ago

I am getting the same error. How did you solve this problem?

BhavyaSingh2611 commented 5 years ago

Hi @luis-pato I was about to use for my next project Aim Design but the objectives are changed after the non resolution of the issue for a week.

BhavyaSingh2611 commented 5 years ago

Aim design is a framework helpful in creating ui which is still in alpha stage thanks I am reopening this issue

luis-pato commented 5 years ago

If this interests you, i have fixed the error by using postcss (i am using rollup for my project) and littcss (because i am using webcomponents)

BhavyaSingh2611 commented 5 years ago

Please refer to https://github.com/BhavyaSingh2611/aim-design/commit/d00d905f6459258d064f8f52ab09d041230d14f9 commit as there are further commits

BhavyaSingh2611 commented 5 years ago

Can you if possible give me a solution with webpack

BhavyaSingh2611 commented 5 years ago

@luis-pato for now give me the source of your project

luis-pato commented 5 years ago

The postcss has nice documentation on how to use it with webpack! https://github.com/postcss/postcss#webpack

BhavyaSingh2611 commented 5 years ago

By the what's the fix using postcss

BhavyaSingh2611 commented 5 years ago

@luis-pato by the way what's the fix using postcss

luis-pato commented 5 years ago

My problem was that i am using webcomponent and i wasn't exporting the css correctly

BhavyaSingh2611 commented 5 years ago

@luis-pato By the i was using scss

luis-pato commented 5 years ago

@luis-pato By the i was using scss

Please like in the webpack doku how to user scss. I am sure postcss can help you. They have lots of information on their websites! ;)

YoshiRulz commented 1 year ago

This was in the top DDG results for the symptom error message, so let me add my experience: I was attempting to concatenate 2 CSSResults with +, which doesn't work because they're not strings. You can always use interpolation if necessary.