Html Question posted in
Some basic documentation can be found here.

Html – styling a "custom elements"

I am playing around with creating my own framework where I inject content into ‘custom elements’ (I am not sure how to refer to them correctly .. they are not custom elements as they are not web components)

Is there a way to correctly put styles on html elements that are not part of the standard ? I can’t see why ie border or float can’t work ? the debugger seems to show that the browser correctly calculates their size.

For example the following give a strange result 🙁

<style>
  .border { border:solid }
</style>

<custom-  class="border">
  <div>
    hello
  </div>
</custom->
Tags:

2

Answers


  1. 0

    You can can create your own custom elements in HTML, but they are display: inline by default, so (depending on the result you want) you may have to specify a particular display (e.g. display: block) to get the result you want.

    .border {
  border: solid;
  display: block;
}
    <custom- class="border">
  <div>
    hello
  </div>
</custom->
    Login or Signup to reply.
  2. 0

    The default display property for your element is inline, so it’s not calculating the width properly based on the contained div.

    Changing it to inline-block or block makes it work as desired.

    <style>
  .border { border:solid }
  custom- { display: inline-block; }
</style>

<custom-  class="border">
  <div>
    hello
  </div>
</custom->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search