Styling Images and content in general.

[HansUXdev]

Just starting to test out simpla by using it with some basic bootstrap templates. There are issues with content not loading css properties. I think part of this has to do with the content being out of scope and contained within the shadow root...

Are there any scss mixins or shouldn't there be, for say:

simpla-img# > .editor  > sm-img-canvas > img#source{
 //style the image
}

The problem right now with adding a class to simpla-img is that some styles are not applied correctly however, this could seemingly be less of a problem with a mixin like:

.this {
  @include simpla(img-container) { 
      width: 100%; 
   }
  @include simpla(img) { 
      border-radius: 50%;
   }
}

or in the compiled css:

.this simpla-img::shadow  > .editor {
      width: 100%; 
}

.this simpla-img::shadow  > .editor  > sm-img-canvas::shadow  > img#source{
       border-radius: 50%;
}

Here is an example:

[madeleineostoja]

Yep so as you guessed, this is because the internals of Simpla elements are encapsulated in Shadow DOM, and therefore can't be touched by design. This is so simpla-img can live inline on your page without interfering with any of your code (and visa versa). Also it's worth noting that ::shadow (and the related /deep/) are deprecated, for similar reasons.

As far as styling simpla-img itself, most of the stuff in your examples should work by just applying them to the outermost element (ie simpla-img { ... }). But there are bound to be edge cases, particularly around sizing. We're planning on rebuilding simpla-img to extend a native img element (see this issue on SimplaElements/simpla-img), which would make styling trivial because there'll be no internal DOM, just a native img element (ie: <img is="simpla-img" sid="foo">).

We also have plans for refactoring the other Simpla elements (namely simpla-text, see this issue) to use the upcoming Simpla v2 SDK, and we'll address any other styling issues then (eg: placeholders for simpla-text are currently flaky), and provide mixins for internals if we have to. Though we'd prefer to design around that need, only because mixins themselves are currently non-ideal (eg: mixins don't cascade, so are very hard to reason about when used to access internals of custom elements).

[HansUXdev]

@seaneking thanks for responding so quickly. I really appreciate it and I think this fills a very critical gap in certain products like nationbuilder or even github pages and makes it very simple to add a super light weight cms for just content. It's incredibly easy to use.

Me and a friend were trying do something like this awhile back with firebase but ended up quitting.

I wasn't aware ::shadow was deprecated because I haven't used polymer since the ealry alpha/beta. I'm glad to see you guys are refactoring and I hope to see the multiple accounts thing on there and I hope that solves some of the problems for seo, stying, accessiblity (like alt tags) etc.

I'm also kinda curious why you went with polymer, instead of react or something a little more lightweight and less of a need for polyfills. JSX also seems particularly ideal compared to html imports which create another request if I'm not mistaken...

[madeleineostoja]

Polymer is just light (very light, with upcoming v2) sugar on top of Web Components. The APIs Simpla relies on are standards driven and are/will be native on the web (implementations shipping soon in Webkit, Mozilla, and Edge). Lots of crucial upsides here - most importantly, since Web Components are a feature of the web platform they work anywhere. We didn't want Simpla to be a 'React thing' or an 'X library' thing. We wanted it to be a web thing, that you can mix in to whatever stack you already use, including React.

That means we do rely on polyfills in several browsers, but most are reasonably light (custom elements v1 is ~2kb, for eg) and again, the standards they shim are being rapidly implemented by vendors.

In general we prefer to polyfill future specs than use domain-specifc libraries (eg: CSS props/mixins over preprocessors, ES6 over DSLs, Web Animations API over motion libs) for many of the same reasons.

Re: HTML imports, not entirely sure what you mean with the comparison to JSX (HTML imports are just a way to import code, more similar to ES6 modules than anything), but they do dedupe. Once you've included something once in a session no extra requests are made.

[madeleineostoja]

Simpla elements have now all been refactored for upcoming Simpla 2, fixing these issues:

• simpla-img now extends a native img, which solves all styling and sizing woes
• simpla-text has been rebuilt to be much more robust, and styling placeholders is no longer an issue

See simpla-img 1.0 branch See simpla-text 1.0 branch

Both will be shipped mainline in the next few days alongside Simpla 2